web-dev-qa-db-ja.com

変更方法Angular 6マテリアルラジオボタンの外側のリップルカラー

Angular Materialラジオボタンのデフォルトの色を変更したい。ラジオボタンの色にしか変更できない。

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

しかし、オプションをクリックすると、外側の波紋効果の色を変更できません。誰かがこれを解決するのを手伝ってください。

enter image description here

cssangularangular-materialmaterial-designangular-material2
6
Vignesh R

マットラジオボタンを完全にスタイルするための解決策

  ::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*/
  }

希望は役に立ちます。

4
Nenad Radak

Angularマテリアルをカスタマイズする唯一の方法は、CSSルールを上書きすることです。そのため、解決策は、ラジオボタンのCSSリップルルールを上書きすることです。

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

デフォルトのテーマ（白のフォーム）に金色があり、それを茶色（白）に変更する必要がありました。選択すると内側と外側の円が茶色になり、選択しないと外側の円が茶色になります。リップル効果を合わせる必要もありました。これが機能する結果です：

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

不透明度を変更する必要はありません。

0
Russ