Styling mat-select in Angular Material

Question

How to style mat-select s panel component  From the docs I get that I need to provide panelClass so I make it like this     lt mat-form-field gt     lt mat-select placeholder  Search for        ngModel    searchClassVal      panelClass  my-select-panel-class       change   onSearchClassSelect  event   gt       lt mat-option  ngFor  let class of searchClasses   value   class value  gt   class name   lt  mat-option gt     lt  mat-select gt   lt  mat-form-field gt    I inspected in developer tools that this class is attached to the panel in DOM and it is attached  So I have my custom scss class attached to this element  Now when I provide css it just don t work  My scss for example looks like this    my-select-panel-class       width 20px      max-width 20px      background-color  red      font-size  10px      The width of the panel is always equal to the width of the select element  Sometimes In options You have too long strings and I would like to make it a little bit wider  Is there any way how to do this  My style from my component just not working even background-color is not working  Does somebody knows why this behaves so strange   I m using  Angular 4 4 5  angular material  2 0 0-beta 12

User · Answer

Put your class name on the mat-form-field element  This works for all inputs

User · Answer

For Angular9   according to this  you can use    mat-select-panel       background  red               Demo   Angular Material uses mat-select-content as class name for the select list content  For its styling I would suggest four options   1  Use   ng-deep      Use the  deep  shadow-piercing descendant combinator to force a style   down through the child component tree into all the child component   views  The  deep  combinator works to any depth of nested components    and it applies to both the view children and content children of the   component    Use  deep       and   ng-deep only with emulated view encapsulation    Emulated is the default and most commonly used view encapsulation  For   more information  see the Controlling view encapsulation section  The   shadow-piercing descendant combinator is deprecated and support is   being removed from major browsers and tools  As such we plan to drop   support in Angular  for all 3 of  deep       and   ng-deep   Until   then   ng-deep should be preferred for a broader compatibility with   the tools    CSS     ng-deep  mat-select-content      width 2000px      background-color  red      font-size  10px         DEMO    2  Use ViewEncapsulation         component CSS styles are encapsulated into the component s view and   don t affect the rest of the application    To control how this encapsulation happens on a per component basis    you can set the view encapsulation mode in the component metadata    Choose from the following modes           None means that Angular does no view encapsulation  Angular adds the   CSS to the global styles  The scoping rules  isolations  and   protections discussed earlier don t apply  This is essentially the   same as pasting the component s styles into the HTML    None value is what you will need to break the encapsulation and set material style from your component  So can set on the component s selector   Typscript     import  ViewEncapsulation   from   angular core             Component                        encapsulation  ViewEncapsulation None         CSS   mat-select-content      width 2000px      background-color  red      font-size  10px      DEMO    3  Set class style in style css  This time you have to  force  styles with  important too   style css    mat-select-content     width 2000px  important     background-color  red  important     font-size  10px  important        DEMO    4  Use inline style   lt mat-option style  width 2000px  background-color  red  font-size  10px       gt    DEMO

User · Answer

Working solution is by using in-build  panelClass attribute and set styles in global style css  with  important   https   material angular io components select api  x000D   x000D     style css     matRole  mat-option-text     height  4em  important    x000D   lt mat-select panelClass  matRole  gt     x000D   x000D   x000D

[css] Styling mat-select in Angular Material

Examples related to css

Examples related to angular

Examples related to typescript

Examples related to angular-material