Angular MdSelect 没有下划线未定义答案

【问题标题】：Angular MdSelect no underline not definedAngular MdSelect 没有下划线未定义
【发布时间】：2017-06-20 18:31:55
【问题描述】：

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

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

我的.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;
    }
}

【问题讨论】：

标签： css angular material-design angular-material2

【解决方案1】：

试试：

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

demo

【讨论】：

【解决方案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;
    }        
}

【讨论】：