Angular Material customization guide clarification

Question

In the angular material guidelines, there's the following paragraph:

"Avoid defining custom styles that would affect the size or internal layout of the component, such as padding, height, width, or overflow. You can specify display: none to hide a component, but avoid specifying any other display value. Overriding these properties can break components in unexpected ways as the internal styles change between releases."

I'm in the middle of having to fix a lot of components because we customized them too much. Now we want to make sure we customize them, but make it compatible with future uptates from material, so that they won't break. I do not fully undestand this paragraph, tho. And I am hoping people could clarify.

Can I not modify properties, say height, at all? Or can I change (e.g.) the button's height if I add a class to that button and modify that class:

 <button class="mybutton" mat-button>Basic</button>

Css:

mybutton { height: 50px; }

How should I interpret that?

Answer 1

As said, don't touch size this way. This is gonna break alignments.

You can change size with material density property.

.the-dense-zone {
  @include mat.button-density(-1);
}

https://material.angular.io/guide/theming#customizing-density

https://m2.material.io/design/layout/applying-density.html#components