Can override height of mat-list-item, but not mat-list-item-content

[nickbelling]

I'm able to adjust the size of a ".mat-list-item", but its interior component, a div with class ".mat-list-item-content", is the element that is responsible for the mat-list-item's size. I don't appear to be able to adjust its size.

Adjusting the height of the .mat-list-item works, but the interior .mat-list-item-content has a fixed size (48px) that doesn't appear to be adjustable, so the mat-list-item-content element overflows its parent mat-list-item.

I don't want to adjust the height of every mat-list-item, just particular ones.

.my-list-1 .mat-list-item {
  height: 30px;
}

.my-list-2 .mat-list-item .mat-list-item-content {
  height: 30px;
}

    <h3>List one, size change to .mat-list-item, interior element size forced</h3>
    <mat-nav-list class="my-list-1">
      <mat-list-item>
        <h3 matLine>My item 1</h3>
      </mat-list-item>
      <mat-list-item>
        <h3 matLine>My item 2</h3>
      </mat-list-item>
      <mat-list-item>
        <h3 matLine>My item 3</h3>
      </mat-list-item>
    </mat-nav-list>
    
    <h3>List two, attempted size change to .mat-list-item-content, size not changing</h3>
    <mat-nav-list class="my-list-2">
      <mat-list-item>
        <h3 matLine>My item 1</h3>
      </mat-list-item>
      <mat-list-item>
        <h3 matLine>My item 2</h3>
      </mat-list-item>
      <mat-list-item>
        <h3 matLine>My item 3</h3>
      </mat-list-item>
    </mat-nav-list>
  </p>

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Adding a "height" scss rule to .mat-list-item-content will adjust the height of the mat-list-item

What is the current behavior?

When "height" rule is applied to mat-list-item, height changes but interior remains the same.
When rule is applied to mat-list-item-content, height does not change. Chrome does not even show the rule crossed-out or overridden in the developer console.

What are the steps to reproduce?

http://plnkr.co/edit/zhV5ziqIJugHzGANhMtS

[willshowell]

Take a look at the guide on Customizing Angular Material component styles. For your example, you'll need to increase the specificity of your selectors and remove their encapsulation.

[jelbourn]

We could probably make it easier to override the height

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}