Styles CSS de l'interface utilisateur des matériaux angulaires personnalisés

Question

<p>J'utilise la balise Mat-grid-tile et j'ai réalisé qu'elle utilise une classe CSS. Mat-grid-tile -content, qui est copié-collé ci-dessous.

P粉696146205469 Il y a quelques jours496

Answer 1

Malheureusement, changer le CSS d'Angular Material n'est pas simple en raison de l'encapsulation. Vous pouvez vous référer au lien suivant pour plus d'informations : https://material.angular.io/guide/customizing-component-styles.

Il n'existe aucune méthode recommandée pour modifier les styles de matériaux angulaires, car leur conception ne peut pas être facilement modifiée. Cependant, si vous souhaitez quand même continuer, il existe trois manières possibles :

Désactiver l'encapsulation : La désactivation de l'encapsulation affecte tous les styles CSS du composant, y compris les éléments enfants des autres composants du modèle. Vous pouvez en savoir plus ici : https://angular.io/guide/view-encapsulation.

Remplacez la classe .mat-grid-tile-content dans le fichier style.css dans le répertoire racine du projet Angular. Tous les styles CSS seront appliqués à tous les modèles HTML du projet. Si la modification ne prend pas effet, essayez d'utiliser le mot-clé !important à la fin de l'attribut.

Utiliser ::ng-deep (obsolète) : bien que ::ng-deep soit obsolète, certains développeurs le préfèrent toujours car il n'existe pas d'alternative parfaite. Soyez prudent cependant, car la dépréciation peut causer des problèmes à l'avenir.

En résumé, la modification des styles de matériaux angulaires n'est pas recommandée, mais si vous choisissez de le faire, veuillez considérer les conséquences potentielles de chaque approche.