Angular MdSelect 无下划线未定义

Question

我正在与 Material for Angular. I need to define a md-select component within a custom component. The fact is that I need the md-select to have no underline similar to the solution 合作 AngularJS。

根据生成的元素，我尝试将 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;
    }        
}

Angular MdSelect 无下划线未定义

Angular MdSelect no underline not defined

css

material-design

angular-material2

angular