My autocomplete-filter-example.html file:

<form >
  <mat-form-field  appearance="fill">
    <mat-label>Assignee</mat-label>
    <input
      type="text"
      matInput
      [formControl]="myControl"
      [matAutocomplete]="auto"
    />
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option
        *ngFor="let option of filteredOptions | async"
        [value]="option"
      >
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

and autocomplete-filter-example.css

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

.mat-option {
  height: 50px;
  background-color: red;
  color: red;
}

.mat-option-text {
  text-emphasis-color: red;
}

How can I get the css styles to apply to the mat-option? Also, how can I set the dropdown select list to be scrollable and only show one option at a time?

Style Example here

Tried to follow the top answer from Similar question but it does not seem to work.

CodePudding user response：

Try adding encapsulation: ViewEncapsulation.None, to your component decorator:

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

CodePudding user response：

<mat-autocomplete #auto="matAutocomplete" class = "test-class" classlist="test-class">

You can use ::ng-deep if you still want to do it in the component css file

::ng-deep .test-class {
  background-color: blue;
}