Angular 6 Material - 色调和如何更改垫子单选按钮的颜色

Question

如何更改使用 CSS 的颜色？

在另一篇文章中看到，如果我使用以下代码，它会改变它，但到目前为止我还没有运气。

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color:rgb(255, 37, 37);
  }

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    border-color: rgb(66, 134, 244);
}

.mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color: rgb(66, 134, 244);
}

另外，我怎么能使用其余的色调？

<mat-radio-button color="accent">Hello, World</mat-radio-button>

假设我想使用 Accent 颜色、300 或 A100 的色调，我该怎么做呢？

我试过使用accent-100和 100 accent hue-100 ，但是它不起作用

Answer 1

在你的style.css/style.scss添加这个 css

堆栈闪电战

样式.css/样式.scss

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{
  border-color:rgb(66, 134, 244); 
}

.mat-radio-button.mat-accent .mat-radio-inner-circle{
  color:rgb(66, 134, 244);
  background-color:rgb(66, 134, 244) ;
}

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color:rgb(255, 37, 37,.26);
}

Answer 2

以上都不适合我。 但是这个工作，即把 color="primary" 放在 mat -radio 按钮上。 IE

<mat-radio-button color="primary" value=1>Active</<mat-radio-button>. 

请参阅下面的示例

https://stackblitz.com/edit/angular-material2-issue-ethbcx

Answer 3

::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  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*/
}

Answer 4

您可以使用以下方法设置自定义颜色：

将此代码放在您的模块声明中：

providers: [{
    provide: MAT_RADIO_DEFAULT_OPTIONS,
    useValue: { color: 'accent' },
}]

Answer 5

对我有用的解决方案是这样的，将其添加到您的：

样式.css/样式.scss

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color:  rgb(22, 92, 125) !important;
}

.mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color:  rgb(22, 92, 125) !important;
    z-index: 3;
}

.mat-radio-button .mat-radio-outer-circle {
    border-color:  rgb(22, 92, 125) !important; // Override material
    z-index: 3;
}

Answer 6

我正在使用 ng 13.1.2 并向我的 mat-radio-buttion 添加颜色属性对我有用

<mat-radio-button color="primary" style="..." class="..." value="..." (change)="...">
      RADIO LABEL
</mat-radio-button>

Answer 7

所选答案的小升级。 为我工作。

$myMatRadioRippleColor: #0000FF;

::ng-deep .mat-radio-button.mat-accent {
  &.mat-radio-checked .mat-radio-outer-circle {
    border-color: $myMatRadioRippleColor; 
  }

  .mat-radio-inner-circle {
    color: $myMatRadioRippleColor;
    background-color: $myMatRadioRippleColor ;
  }

  .mat-radio-ripple .mat-ripple-element {
    background-color: $myMatRadioRippleColor !important;
  }
}