造型垫-角度材质选择

For Angular9+, according to this, you can use:

.mat-select-panel {
background: red;
....
}

Demo

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

<mat-option style="width:2000px; background-color: red; font-size: 10px;" ...>

DEMO

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

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

/* style.css */
.matRole .mat-option-text {
height: 4em !important;
}

<mat-select panelClass="matRole">...

Angular material 11.2.6

      <mat-select class="text-sm">
<mat-option> Text </mat-option>
</mat-select>

Where text-sm (as of tailwind)

.text-sm {font-size: 0.75rem}

Here's a fully fledged solution for styling mat select.

HTML follows:

<mat-form-field class="booking-facility">
<mat-select disableOptionCentering placeholder="facility" panelClass="booking-facility-select" [ngModel]="facilityId"
(ngModelChange)="updateFacility($event)">
<mat-option *ngFor="let fac of facilities | keyvalue" [value]="fac.value.id">
<span>\{\{ fac.value.name | lowercase }}</span>
</mat-option>
</mat-select>
</mat-form-field>

SCSS follows (use global stylesheet, namely styles.scss):

.booking-facility-styles {
font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
letter-spacing: 1px;
font-size: 22px;
color: #55595C;
}


.booking-facility {
// label
@extend .booking-facility-styles;


// label
.mat-form-field-label {
@extend .booking-facility-styles;
color: #BBB !important;
}


.mat-select-value-text {
// select
@extend .booking-facility-styles;
}
}


.booking-facility-select .mat-option {
// options
@extend .booking-facility-styles;
font-size: 16px !important;
}

In css copy this code to make 100% width

mat-form-field {
width: 100%;
}

In your component, disable styles encapsulation:

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

For appearance (color/font), use

.mat-select-panel {
background: red;
}

Having options with very long text, you may want to change width of the list. In such case you should use:

.mat-form-field {
width: 100%;


.mat-form-field-infix {
width: 100%;
}
}

No !important; css shenanigans required.
(tested with ang12+)

For <mat-option> inside <mat-autocomplete> you can set the panelWidth attribute of the autocomplete:

<mat-autocomplete panelWidth="240px">

I would like to add an explanation to why the options in a select cannot be styled in the standard way, like a mat-form-field, for example.

Elements like the options in a mat-select or a material modal are not inside the angular application, but in a container cdk-overlay-container. The cdk-overlay-container is on the same level as the angular application. So that explains why normal css rules in a component are not applied to the elements.

This is why we need to access the class like in @Vega's answer

::ng-deep {
.mat-option {
font-family: cursive;
}
}