Angular <mat-list-option> custom height-CodePudding

In this official example of <mat-selection-list> with <mat-list-option>. I want to give every item within the list a custom height.

I have tried:

.mat-list-option {
  height: 100px
}

And even tried to set the height to inside element using a selector. It won't work. Seems mat-list-option has a preconfigured height of 48px.

CodePudding user response：

Indeed, this looks a bit out of usual way of styling, but there is a hack. And use mat-list-option and not the homonymous class:

css:

mat-list-option:nth-child(n){
  height: 100px;
}

CodePudding user response：

Should also include .mat-list-item.

.mat-list-base .mat-list-item, .mat-list-base .mat-list-option {
  height: 100px;
}