CODEWITHSUNDEEP
cssangularangular-material
Daud
Daud

Reputation: 7887

Unable to apply simple CSS to an angular Materials element

Here's the Stackblitz.

I'm trying to apply the CSS color: blue to the div with class mat-button-toggle-label-content, but its not getting applied.

A similar CSS is getting successfully applied to a parent element called mat-button-toggle-group.

Upvotes: 1

Views: 938

Answers (3)

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5041

Just apply color to mat-button-toggle and keep it inside mat-button-toggle-group

Working stackblitz

mat-button-toggle-group {
  background-color: orange;

  mat-button-toggle { 
    color: blue;
  }
}

You can apply the style to .mat-button-toggle-label-content but you need to break Encapsulation.

Component styles are encapsulated. You can't access component's styles(classes, ids) from outside of the component. You need to pierce into that component and inject the styles like below

Note: /deep/ is deprecated and no more recommended. So you can go with above approach. And for more details check Component Styles

mat-button-toggle-group {
  background-color: orange;

  /deep/ .mat-button-toggle-label-content {
      color: blue;
  }
}

Upvotes: 1

Tariq Saeed
Tariq Saeed

Reputation: 1193

Just move it to styles.scss and it will work Stackblitz.

Upvotes: 0

Cuong Hoang
Cuong Hoang

Reputation: 578

There are many reason for that !

  1. Your CSS may not be inserted properly into code
  2. The order of material design CSS take over the order of CSS

My solution is that you may need to put !important after color: blue;

it is : color: blue !important;

Upvotes: 0

Related Questions