How to change the background colour of mat-select and change edge of select box to rounded style? [duplicate]

Question

Can anyone help me with changing the colour of mat-select box and how to style the box to have rounded corners. I tried by giving it the background-colour property but it is not affecting my element.

html

 <mat-form-field appearance="outline"> 
       <mat-select class="topunit">
          <mat-option *ngFor="let x of filteredData [value]="x">{{x.name}} - {{x.place}} 
          </mat-option>
       </mat-select>
    </mat-form-field>

css

.topunit{
    background-color: white;
    margin-top: 5%;
    padding: 0 0.75em 0 0.75em;
    width: 75%;
    align-items: baseline;
    border-radius: 20px;
}

Answer 1

Severals controls of material angular use cdk to create a div cdk-overlay-container outside our app. So if we want to change the .css we need use style.css (not the .css of the component)

Futhermore, usually this controls has a property: "PanelClass" that allow us only change this control -not all- (*)

So you can write in styles.css, e.g.

.topunit.mat-select-panel
{
  background-color: red;

}

And in your .html

<mat-select panelClass="topunit">
  ...
</mat-select>

(*) see that if we only write in styles.css

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

}

All ours pannels with class mat-select-panel becomes red.