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>

比方说，我想从300或A100的色调中使用Accent颜色，我该怎么做呢？

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

Answer 1

以上都不对我有用。但这是可行的，即将color =“ primary”放在mat -radio按钮上。即

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

请参见下面的示例

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

Answer 2

将此CSS添加到您的tail

Stackblitz

style.css / style.scss

style.css/style.scss

Answer 3

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

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

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

Answer 4

最适合我的解决方案是，将其添加到您的计算机中：

style.css / style.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 5

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

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

5 个答案: