0
322
VistasAngular styles from styles.scss are not always being applied
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?
3 Respuestas
Responde la pregunta0
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.
0
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?
0
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>