0
314
VistasLos estilos angulares de styles.scss no siempre se aplican
Agregué algunas propiedades CSS a diferentes botones de tapete en mi sitio web basado en Angular 12. Para no aplicar accidentalmente estas propiedades a todos los botones del tapete, sino solo a los que quiero aplicarlas, agregué una clase a los botones y la usé para establecer las propiedades CSS de esta manera:
Archivo html del componente:
<a class="menu-button" mat-button> <img class ="menu-button-image" src="assets/images/example.png"> <div>Example text</div> </a>Archivo scss del componente:
.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; } Esto funciona bien siempre y cuando mantenga el código css en el archivo scss para el componente, pero como no quiero tener esto como código redundante en cada componente en el que quiero aplicar estas propiedades, lo moví a los estilos. archivo scss en su lugar. Después de hacerlo, solo se aplican algunas de las propiedades, pero algunas parecen sobrescribirse/ignorarse: 
¿Por qué sucede esto y cómo puedo prevenirlo?
3 Respuestas
Responde la pregunta0
Probablemente el css de los botones de material se cargue después de tus clases de style.scss y los selectores tengan la misma importancia por lo que el que se cargue más tarde gane y sobrescriba las definiciones, que están en ambas clases.
Lo que debería funcionar es, por ejemplo, aumentar la importancia de sus definiciones específicas combinando clases
.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 tendrá prioridad sobre solo .mat-button
La otra solución sería crear su propio componente de botón que envuelva el botón de material. Pondría el css personalizado allí y podría reutilizarlo fácilmente dentro de la aplicación.
0
Esos estilos se reescriben. Utilice !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; } Tenga en cuenta que el uso de !important no es una buena práctica: ¿es malo usar !important en una propiedad CSS?
0
Es este comportamiento porque el navegador procesa cada propiedad para ver si se debe aplicar o no, como si se sobrescribieran algunos valores de prefijo de user-select . Entonces, el navegador ignoró estos valores y fue al valor directo.
Como puede ver en el fragmento, algunos flex no se aplican, por lo que el navegador los ignora ( line-through )
.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 para aplicar las propiedades y centre align the content , para que se apliquen los valores
.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>