資料2：plunker上MD-選択

Question

https://plnkr.co/edit/aUYfOBJ0MdywKW2pphOM?p=preview

<md-select placeholder="food" style=""><!-- no width stylings that work --> 
    <md-option *ngFor="let food of foods" [value]="food.value"> 
     {{ food.viewValue }} 
    </md-option> 
</md-select> 

の難しスタイリングの幅を参照してください。私はmd-selectの幅を 'food'のプレースホルダーでスタイリングするのに多くの困難を抱えています。 md-selectタグでstyle = ""を使用できないのはなぜですか？私はこの同じdivを、応答のないクラスと一緒にターゲティングしようとしました。私はまた、クロム、ファイアフォックス、つまりエッジのF12ツールで表示される.md-select-triggerクラスを使用しようとしました。何もない。

動作するのは、ブラウザのツール領域で使用できる.md-select-triggerクラスの最小幅またはフレックススペースの選択を解除することだけです。

私はここで何を扱っているのか分かりません。

Answer 1

これを（グローバルスタイルファイルで）使用してパッチします。あなたはこれが原因.MAT-SELECT - であるMIN-幅

.mat-select /deep/ .mat-select-trigger { 
    min-width: 60px; 
} 

を.MAT選択トリガを変更するには、コンポーネントのCSSに/深い/使用することができますpurwaのastawaの答えに追加するには

.mat-select-trigger { min-width: 50px; } 

Answer 2

トリガは、通常はコンポーネントからアクセスできないmd-selectモジュール内でスタイル設定されています。

上記の方法はすぐに無効になります。代わりにViewEncapsulation.Noneを使用してください。 View Encapsulation

Answer 3

は少し遅くなるかもしれませんが、とにかく... が適切にこれを行うには、あなたのコンポーネントにNoneにView Encapsulationを設定する必要があります。

@Component({ 
    templateUrl: './my.component.html' , 
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None, 
}) 

その後、あなたのコンポーネントのCSSであなただけ行うことができます

ビューなお、Enc：この：私は投稿のリンクから

.mat-select-trigger { min-width: 50px; } 

apsulation = Noneは、Angularが表示なしであることを意味します。 カプセル化。 AngularはCSSをグローバルスタイルに追加します。スコープの範囲 前述の規則、隔離および保護は適用されません。この は、基本的にコンポーネントのスタイルをHTMLの に貼り付けるのと同じです。