Angular MdSelect没有定义下划线

Question

我正在与Material for Angular合作。我需要在自定义组件中定义md-select component。事实是我需要md-select没有类似于AngularJS的solution的下划线。

根据生成的元素，我试图定义CSS类如下，但它们不起作用。

my.component.html

<span>My Component</span>
<md-select placeholder="My Select" floatPlaceholder="never">
    <md-option *ngFor="let option of options" 
[value]="option.value">{{option.viewValue}}</md-option>
</md-select>

my.component.scss

.mat-select { /* This is working */
    display: block;
    width: 396px;
    height: 34px;
    background-color: $pale-gray-two;
    padding: 11px 13px 14px !important;
    font-size: 11px !important;
    color: $greyish-brown-two !important;

}

.mat-select-trigger { /* This is not working */ 

    .mat-select-underline {
        display:none !important;
    }
}    

Answer 1

尝试：

/deep/ .mat-select-underline {
    display: none;
}

demo

Answer 2

由于CSS的特殊性，我不得不做这样的事情

my.component.html

<span>My Component</span>
<md-select placeholder="My Select" floatPlaceholder="never" class="no-underline">
    <md-option *ngFor="let option of options" 
    [value]="option.value">{{option.viewValue}}</md-option>
</md-select>

my.component.scss

.no-underline {

    .mat-select-underline {
        display: none !important;
    }        
}