web-dev-qa-db-fra.com

comment changer Angular 6 matériau radio bouton couleur d'ondulation externe

Je voulais changer Angular Matériau Couleur par défaut du bouton radio. Je ne peux que changer la couleur du bouton radio.

<mat-radio-group>
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

Mais je ne peux pas changer la couleur de l'effet d'ondulation externe lorsque nous cliquons sur l'option. Quelqu'un s'il vous plaît, aidez-moi à résoudre ce problème.

enter image description here

cssangularangular-materialmaterial-designangular-material2
6
Vignesh R

Voici la solution pour styliser complètement le bouton radio mat

  ::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
        opacity: 0.5 !important;     /*click effect color change*/
        background-color: blue !important;
  }

  ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
        background-color: blue!important;   /*inner circle color change*/
  }

  ::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
       border-color:blue!important; /*outer ring color change*/
  }

L'espoir est utile.

4
Nenad Radak

La seule façon de personnaliser Angular est de remplacer les règles css, donc la solution sera de remplacer les règles d'ondulation css pour le bouton radio:

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
     background-color: rgba(0, 0, 0, .1) !important;
 }
2
Nelu B

J'avais une couleur dorée pour le thème par défaut (sur une forme blanche) et je devais la changer en marron (sur blanc). J'avais besoin du cercle intérieur et extérieur brun lorsqu'il est sélectionné, le cercle extérieur brun lorsqu'il n'est pas sélectionné. J'avais également besoin de l'effet d'entraînement pour correspondre. Voici le résultat qui fonctionne:

  & .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color: brown !important; // Override material
  }

  & .mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color: brown !important; // Override material
    z-index: 3;
  }

  & .mat-radio-button .mat-radio-outer-circle {
    border-color: brown !important; // Override material
    z-index: 3;
  }

Aucun changement d'opacité nécessaire.

0
Russ