J'utilise Angular 6.0.8
avec Angular Material theme
version 6.4.0
Chaque fois que j'essaie de modifier légèrement le thème de matériau, cela ne fonctionne jamais, car je trouve toujours que les propriétés du thème de matériau écrasent mes propriétés CSS comme suit:
currentColor .mat-input-element (material theme)
initial input, textarea, select, button (user agent stylesheet)
#1072BA .English
#1072BA .English
#1072BA body
Seule la première propriété est appliquée (le reste est barré)
J'ai essayé plusieurs variantes pour résoudre ce problème, mais aucune solution n'a fonctionné (par exemple, utiliser important ou modifier l'ordre d'importation des thèmes)
Alors, quelle est la bonne façon de changer de petites choses dans le thème matériel et la feuille de style de l'utilisateur? (pour appliquer cette règle anglaise par exemple)
Mon styles.scss est comme suit, il ne fonctionne que si ce qui remplace le thème Matériau tel que les couleurs et les polices ne fonctionne pas:
@import '~@angular/material/prebuilt-themes/Indigo-pink.css';
/* You can add global styles to this file, and also import other style files */
/* prevent clicking in the wizard nav header */
.mat-horizontal-stepper-header{
pointer-events: none !important;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./assets/material_icons/material_icons.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
Word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.mat-radio-button{
margin: 10px;
}
.mat-checkbox{
margin-bottom: 10px;
}
.Done-numbers{
color: red;
font-weight: bold;
}
.finInfo-hint{
color: gray;
}
.finInfo-success{
color: green;
}
.Arabic {
font-family: "AXtManal" !important;
margin: 0;
/* background: #fff; */
font: normal 16px/20px Verdana;
color: #1072BA;
text-shadow: 0 0 0 #1072BA;
}
.English {
font-family: "Rotis" !important;
margin: 0;
/* background: #fff; */
font: normal 16px/20px Verdana;
color: #1072BA;
text-shadow: 0 0 0 #0078be;
}
Mise à jour 1:
S'il vous plaît vérifier cet exemple stackblitz , le problème est très clair dans ce
1- Je m'attends à ce que la division englobante avec la classe d'arabe modifie le font & color des champs de formulaire contenus, mais ce n'est pas le cas (comme le premier champ avec Sushi, la police n'est pas modifiée )
Ceci est très important car tous les éléments sont inclus dans une div avec ngClass en anglais ou en arabe. Je souhaite appliquer la classe à tous les éléments inclus, y compris les champs de formulaire matériel.
2- Comment changer la couleur de toutes les étiquettes de formulaire du bleu au rouge ou au vert?
Veuillez vérifier ceci exemple minimal (J'ai dû ajuster la famille de polices pour que cet exemple fonctionne).
Vous écrasez certaines de vos définitions de style de police. Définissez votre famille de polices, votre taille et votre poids, comme dans la définition ajustée suivante de .Arabic
:
.Arabic {
font-family: 'Shadows Into Light', cursive;
margin: 0;
/* background: #fff; */
font-size: 16px/20px;
font-weight: normal;
color: red;
text-shadow: 0 0 0 #1072BA;
}
Ou définissez les propriétés de la police avec la déclaration abrégée comme dans cet exemple modifié:
.English{
margin: 0;
/* background: #fff; */
font: normal 16px/20px 'Pacifico', cursive;
color: green;
text-shadow: 0 0 0 #0078be;
}
Pour répondre à votre commentaire/question modifiée:
Je trouve la police dans les valeurs calculées mais elle est barrée et non appliqué, il ne s'applique que si j'applique la classe spécifiquement sur le champ en forme de tapis
Vous devez appliquer la classe explicitement sur .mat-form-field
si vous souhaitez la modifier car, dans le prébuilt-themes/Indigo-pink.css, elle est définie explicitement comme
.mat-form-field{
font-size:inherit;
font-weight:400;
line-height:1.125;
font-family:Roboto, "Helvetica Neue",sans-serif
}
idem pour la couleur de l'étiquette.
Avec CSS, vous devez toujours être au moins aussi spécifique que la définition de style existante.
Vous pourriez faire ceci:
.Arabic .mat-form-field,.mat-form-field-appearance-legacy .mat-form-field-label,
.mat-input-element,.mat-form-field.mat-focused .mat-form-field-label{
font-family: 'Shadows Into Light', cursive;
margin: 0;
/* background: #fff; */
font-size: 16px/20px;
font-weight: normal;
color: red;
text-shadow: 0 0 0 #1072BA;
}
.Arabic .mat-form-field.mat-focused .mat-form-field-ripple{
background-color: red
}
Mais ce n'est pas très gentil je pense. Une meilleure solution serait de créer deux thème personnalisé s, un pour chaque langue et de définir les couleurs et les polices. De cette façon, vos définitions de couleurs et de polices s’appliqueront automatiquement aux éléments imbriqués . Ce guide est une bonne lecture en ce qui concerne les thèmes personnalisés.
Comme mentionné dans ma précédente édition, la création de thèmes personnalisés pourrait être la meilleure solution à votre problème. Les thèmes personnalisés dans un matériau angulaire sont assez puissants, mais vous devez d'abord en créer un peu. Après cela, quelques lignes suffisent pour ajuster la couleur, les polices, etc.
J'ai créé un nouveau stackblitz où vous pouvez voir la mise en place d'un thème par défaut et de deux thèmes personnalisés, ainsi que l'ajustement de la couleur et des polices du champ material-form-field. J'ai commenté chaque section mais j'expliquerai brièvement ici aussi:
La structure générale de votre styles.scss
devrait être:
Une fois que vous avez importé @import '~@angular/material/theming';
, vous pouvez commencer à ajuster les polices (si vous le souhaitez). Pour ce faire, il vous suffit de définir un nouveau mat-typography-config
exemple:
$arabic-typography: mat-typography-config(
$font-family: '"Shadows Into Light", cursive'
);
$english-typography: mat-typography-config(
$font-family: '"Pacifico", cursive'
);
Pour appliquer ces configurations de polices, vous devez les transférer au mat-core
- mixin qui se charge du reste: @include mat-core($english-typography);
. Désormais, si vous souhaitez uniquement appliquer votre configuration de police à un thème personnalisé spécifique, vous devez ajouter votre configuration de police dans la définition du thème.
Un thème est défini par la structure suivante: définissez les couleurs principales souhaitées sur le thème à l’aide de mat-light-theme-mixin. Pour appliquer le thème, utilisez @include angular-material-theme(<theme name>);
$app-primary: mat-palette($mat-Indigo);
$app-accent: mat-palette($mat-amber, A200, A100, A400);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);
Pour réaliser votre configuration de plusieurs thèmes, vous pouvez envelopper une définition de thème dans un nom de classe CSS comme suit:
.Arabic {
$arabic-primary: mat-palette($mat-orange);
$arabic-accent: mat-palette($mat-blue, A200, A100, A400);
$arabic-warn: mat-palette($mat-red);
$arabic-theme: mat-light-theme($arabic-primary, $arabic-accent, $arabic-warn);
@include mat-core($arabic-typography);
@include angular-material-theme($arabic-theme);
}
Désormais, le thème .Arabic
n'est appliqué que si vos éléments HTML sont les descendants d'un élément de la classe .Arabic
. De plus, j'ai ajouté @include mat-core($arabic-typography);
qui indique au moteur de thème d'appliquer simplement le $arabic-typography
au $arabic-theme
.
La dernière étape pour réaliser votre style consiste à définir un thème de composant personnalisé qui donne le style souhaité aux champs de formulaire mat. Il s’agit maintenant de quelques lignes:
@mixin my-custom-component($theme) {
// retrieve variables from current theme
$primary: map-get($theme, primary);
// style element
mat-form-field, .mat-form-field-appearance-legacy .mat-form-field-label {
color: mat-color($primary);
}
}
Ce thème de composant personnalisé est ensuite ajouté à vos thèmes personnalisés en ajoutant la ligne @include custom-components-theme(<theme name>);
à chaque définition de thème. (custom-components-theme est une petite fonction d'aide. Lisez-en plus à ce sujet dans le stackblitz).
C'est tout. Si vous devez ajuster davantage de composants, il vous suffit de créer un thème personnalisé pour ce composant et de l'ajouter au mixin personnalisé-composants-thème.
Si vous essayez de remplacer un style de matériau Angular, vous pouvez le faire avec deep
paramètre en face de celui-ci comme ceci:
/deep/ .mat-step-header .mat-step-icon {
background-color: #f6871f;
}
Habituellement, lorsque je travaille avec des bibliothèques de styles de matériaux, elles sont très spécifiques. Si vous inspectez les éléments dans votre navigateur, vous verrez l'ordre dans lequel les styles sont appliqués. Comme ici, vous verrez que certaines propriétés sont écrasées à cause des propriétés plus spécifiées ci-dessus.
Voyez si vos styles sont trop éloignés dans la file d'attente prioritaire. S'ils ne sont pas du tout là-bas, il y a un problème avec l'importation.