web-dev-qa-db-fra.com

Impossible de remplacer le thème de matériau angulaire avec mes propriétés css

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?

cssangularangular6angular-material2angular-material-6
3
Ahmed Elkoussy

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;
}

Modifier

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.

EDIT 2: thématisation matérielle angulaire

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:

  • importer les mélanges de matériaux angulaires requis
  • définir les polices
  • définition/importation de thèmes de composants personnalisés
  • définir un thème par défaut
  • définir tous les autres thèmes personnalisés

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.

1
coreuter

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;
}
1
Maartenw

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.

 example

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.

0
Kristoffer Lund