更改角形材质材质材质垫的颜色单选按钮,我使用的是角形材质11版本和角形材质11.0.4版本<mat-radio-group aria-label="Select an option"> <mat-radio-button [color]="primary" value="1" >Without Template</mat-radio-button> </mat-radio-group>
<mat-radio-group aria-label="Select an option"> <mat-radio-button [color]="primary" value="1" >Without Template</mat-radio-button> </mat-radio-group>
juud5qan1#
4.我找了很多东西,但最后还是找到了解决办法
import { ThemePalette } from '@angular/material/core'; color: ThemePalette = "warn"; <mat-radio-button [color]="color" value="2">With Template</mat-radio-button>
yv5phkfx2#
我猜你是在谈论单选按钮一旦被选中后的颜色。通常,<mat-radio-group>将是包含<mat-radio-button>的外部群您可以通过两种方式更改颜色。1.就像你尝试的那样,但是在<mat-radio-group>中添加了[color]属性,它会从你的主题中获取颜色(预定义的或者自定义的)1.在styles.scss文件中全局覆盖CSS(这个方法不推荐用于颜色改变,但可以用于其他改变,如圆的半径等,)i)要覆盖CSS,只需添加以下代码
<mat-radio-group>
<mat-radio-button>
[color]
// For outer circle .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { border-color: blue; } // For inner circle .mat-radio-checked .mat-radio-inner-circle { background-color: blue; }
2个变化中的一个应该起作用!
p1iqtdky3#
您可以在CSS文件中添加以下内容:
::ng-deep .mat-radio-checked .mat-radio-outer-circle { border-color: blue; } ::ng-deep .mat-radio-checked .mat-radio-inner-circle { background-color: blue; }
如果答案适合您,请标记为有用。
oogrdqng4#
如需在“未选中”状态下更改环颜色:
::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { opacity: 0 !important; /*click effect color change*/ background-color: rgb(255, 255, 255) !important; } ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { background-color: rgb(255, 255, 255)!important; /*inner circle color change*/ } ::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { border-color:rgb(255, 255, 255)!important; /*outer ring color change*/ } ::ng-deep.mat-radio-outer-circle { border-color:rgb(255, 255, 255)!important; /*outer ring color change*/ }
68de4m5k5#
来自文档:默认颜色配置可以使用MAT_RADIO_DEFAULT_OPTIONS提供程序全局配置单选按钮的默认颜色提供商:[{提供:MAT_RADIO_DEFAULT_OPTIONS,使用值:{color:'accent '},}]因此,要从主题中获取原色,请将以下内容添加到NgModule装饰器中:
providers: [{ provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'primary' }, }]
5条答案
按热度按时间juud5qan1#
4.我找了很多东西,但最后还是找到了解决办法
yv5phkfx2#
我猜你是在谈论单选按钮一旦被选中后的颜色。
通常,
<mat-radio-group>
将是包含<mat-radio-button>
的外部群您可以通过两种方式更改颜色。
1.就像你尝试的那样,但是在
<mat-radio-group>
中添加了[color]
属性,它会从你的主题中获取颜色(预定义的或者自定义的)1.在styles.scss文件中全局覆盖CSS(这个方法不推荐用于颜色改变,但可以用于其他改变,如圆的半径等,)i)要覆盖CSS,只需添加以下代码
2个变化中的一个应该起作用!
p1iqtdky3#
您可以在CSS文件中添加以下内容:
如果答案适合您,请标记为有用。
oogrdqng4#
如需在“未选中”状态下更改环颜色:
68de4m5k5#
来自文档:
默认颜色配置可以使用MAT_RADIO_DEFAULT_OPTIONS提供程序全局配置单选按钮的默认颜色
提供商:[{提供:MAT_RADIO_DEFAULT_OPTIONS,使用值:{color:'accent '},}]
因此,要从主题中获取原色,请将以下内容添加到NgModule装饰器中: