Angular 6 Material - Hues 和如何改变 mat 单选按钮的颜色 [英] Angular 6 Material - Hues and How to change the color of mat radio button

问题描述

如何更改使用 CSS 的颜色?

How can I change the color of the using CSS?

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

Saw on another post that if I use the following code, it would change it, but I had no luck with it so far.

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

另外，我如何使用其余的色调?

Also, how could I use the rest of the color hues?

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

假设我想使用 Accent 颜色、300 或 A100 的色调，我将如何去做?

Let's say that I want to use from the Accent color, the hue of 300 or A100, how would I go about to doing that?

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

I've tried using accent-100 and accent hue-100 but, it doesn't work

推荐答案

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

add this css in your style.css/style.scss

Stackblitz

style.css/style.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);
}

这篇关于Angular 6 Material - Hues 和如何改变 mat 单选按钮的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！