Angular styles from styles.scss are not always being applied

Question

I added a few CSS properties to different mat-buttons on my Angular 12 based website. In order to not accidentally apply these properties to all mat-buttons, but only to the ones I want to apply them to, I added a class to the buttons and used it to set the CSS properties like this:

Component html file:

<a class="menu-button" mat-button>
  <img class ="menu-button-image" src="assets/images/example.png">
  <div>Example text</div>
</a>

Component scss file:

.menu-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
}

.menu-button-image {
  width: 200px;
  height: 200px;
}

This works just fine as long as I keep the css code in the scss file for the component but because I do not want to have this as redundant code in every single component where I want to apply these properties, I moved it into the styles.scss file instead. After doing so, only some of the properties are applied, but some appear to be overwritten/ignored:

Why does this happen and how can I prevent this?

Answer 1

Probably the css of material buttons is loaded after your classes from style.scss and the selectors have the same importance so the later loaded win and overwrite the definitions, which are in both classes.

What should work is e.g increasing the importance of your specific definitions by combining classes

.mat-button {
  &.menu-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
 }
}

.mat-button.menu-button will have precedence over just .mat-button

The other solution would be to create your own button component which wraps the material button. You would put the custom css there and could reuse it easily within the app.