How to change the text color of the material radio button-CodePudding

I need your help. I have a small piece of code. I use Material UI together with Angular. I have a group with a radio button. The fact is that the text in the radio button does not change, although I set the scss value to change to this color: # 262D34.

<mat-radio-group aria-label="Select an option" style="display: flex; flex-direction: column">
   <mat-radio-button value="1" >
     Roman Dyshko
   </mat-radio-button>
   <mat-radio-button value="2" >
     Roman Dyshko
   </mat-radio-button>
</mat-radio-group>

.radio_button {
   font-family: 'Work Sans', serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 150%;
   text-decoration-line: underline;
   color: #556EE6;
}

mat-radio-group mat-radio-button .radio_button {
  color: #556EE6;
}

CodePudding user response：

You must use ::ng-deep if you want to have fully access to the styling of those components. Like this:

::ng-deep mat-radio-group mat-radio-button .radio_button {
  color: #556EE6;
}

Above code would work generally, in case you want to go through a component styling.

Updated answer

In case you want to restyle your radio buttons, it should be something like this:

::ng-deep
  .mat-radio-button.mat-accent.mat-radio-checked
  .mat-radio-outer-circle {
  border-color: blue; /*change radio button color when selected*/
}

::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: red; /*change radio button inner circle color */
}

::ng-deep .mat-radio-outer-circle {
  border: 1px solid black; /*change radio button not checked border */
}

::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  background-color: rgba(0, 0, 0, 0.1) !important; /* change click effect color */
}

Note: I used !important, because as said, only in a few cases you must use force the style to change.

CodePudding user response：

You need to override the default style with ::ng-deep. It is deprecated feature and it might change the color application wide. So use with caution like this.

::ng-deep mat-radio-group mat-radio-button .radio_button {
  color: #556EE6 !important; //<--- not necessary but needed in some cases
}

You need to add !important (in some cases) and kill your terminal if you have an active one. Re-compile the app again it should solve your problem.

CodePudding user response：

Material Radio Styles

Text

Angular's API states that the ng-deep psuedo-class is deprecated and completely disables view-encapsulation for that rule.

If we use it without the :host pseudo-class, it will make the style-rule global, not a good thing.

You can just use:

.mat-radio-button {
  color: pink;
}

Or if you want to use a color from your palette:

.mat-radio-button {
  color: mat.get-color-from-palette($primary-light, 400);
}

Ripple

Some people also like to override the ripple to be in a secondary or off-color. So I'll add a small example of that too:

.mat-radio-ripple .mat-ripple-element {
  background-color: mat.get-color-from-palette(
    $accent-palette,
    A400
  ) !important;
}

In short, you just need to know the right class names to override. In some cases like the ripple, the !important is needed to override the default.

Only Select Tags

Another example for when you want only select groups/radio-buttons to gain the styling.

Template

<li>
  <mat-radio-group
    
    aria-label="Select an option"
    formControlName="gender"
  >
    <mat-radio-button color="primary" value="male">Male</mat-radio-button>
    <mat-radio-button value="female">Female</mat-radio-button>
  </mat-radio-group>
</li>

Css:

.pink .mat-radio-button {
  color: pink;
}

Or for just one of the radio buttons:

<div >
  <mat-radio-button value="female">Female</mat-radio-button>
</div>

Dynamically

Or here's another example if you want a style to be applied dynamically.

Template:

<div [ngClass]"getClass()">
  <mat-radio-button value="female">Female</mat-radio-button>
</div>

Script:

getClass(event: Event) {
  if(/* Your conditions */)
    return ['pink']
  return []
}

Stackblitz

Here's a Material Form Example on my Stackblitz account I edited to show everything you can find above (and more), including a Matial Theme etc. In it I'm overriding the mat-radio-button globally in styles.scss and also in app.component.scss.