css 垫子单选按钮颜色在Angular 上的变化

o0lyfsai  于 2023-01-18  发布在  Angular
关注(0)|答案(5)|浏览(160)

更改角形材质材质材质垫的颜色单选按钮,我使用的是角形材质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>

juud5qan

juud5qan1#

4.我找了很多东西,但最后还是找到了解决办法

import { ThemePalette } from '@angular/material/core';     
color: ThemePalette = "warn";
     <mat-radio-button [color]="color" value="2">With Template</mat-radio-button>
yv5phkfx

yv5phkfx2#

我猜你是在谈论单选按钮一旦被选中后的颜色。
通常,<mat-radio-group>将是包含<mat-radio-button>的外部群
您可以通过两种方式更改颜色。
1.就像你尝试的那样,但是在<mat-radio-group>中添加了[color]属性,它会从你的主题中获取颜色(预定义的或者自定义的)
1.在styles.scss文件中全局覆盖CSS(这个方法不推荐用于颜色改变,但可以用于其他改变,如圆的半径等,)i)要覆盖CSS,只需添加以下代码

// 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个变化中的一个应该起作用!

p1iqtdky

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

如果答案适合您,请标记为有用。

oogrdqng

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*/
 }
68de4m5k

68de4m5k5#

来自文档:
默认颜色配置可以使用MAT_RADIO_DEFAULT_OPTIONS提供程序全局配置单选按钮的默认颜色
提供商:[{提供:MAT_RADIO_DEFAULT_OPTIONS,使用值:{color:'accent '},}]
因此,要从主题中获取原色,请将以下内容添加到NgModule装饰器中:

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

相关问题