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?

Foulk

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.

Rebuke

Answer 2

Those styles are rewritten. Use !important:

styles.scss:

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

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

Bear in mind, the use of !important is not a best practice: Is it bad to use !important in a CSS property?

Stomach

But why are they rewritten? I am not doing that in my own code so it must happen somewhere else. Is there maybe a better practice for re-using my css code in multiple components that does not require me to use !important? – Foulk

@Foulk what Angular are you using? – Stomach

According to ng version I am on Angular version 12.2.0 – Foulk

Answer 3

It is this behavior because browser renders through every property to see that is it should be applied or not , like some prefix values of user-select are overwritten . So browser ignored these values and go to direct value .

As you can see in snippet some flex is not applied so ignored(line-through) by browser

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

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

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

Use align-items: center to apply the properties and center align the content , so that values are applied

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

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

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

Tullusus

But the problem is rather that .mat-button overwrites display and this is something @Foulk wants to avoid. He wants to use display:flex there. – Rebuke