CODEWITHSUNDEEP
cssangulartypescriptstyling
Antonio Santoro
Antonio Santoro

Reputation: 907

Angular does not apply global defined styles

Inside styles.css I defined the mat-expansion-panel to have the following margins

mat-expansion-panel {
    margin: 2vh;
}

However this won't be applied in my components unless it is specified in the local css file.

Even trying to import the styles.css from the component directive won't work

@Component({
  ...
  styleUrls: ['./list.component.css', '../../../styles.css']
})

as I will get the following error

./src/styles.css - Error: No template for dependency: CssDependency

Error: The loader ".../src/styles.css" didn't return a string

Upvotes: 0

Views: 1840

Answers (1)

Amnah Razzaki
Amnah Razzaki

Reputation: 502

try using the following in styles.css

.mat-expansion-panel {
    margin: 2vh !important;
}

But if you want to apply these styles to only one expansion panel, you can apply unique id or assign class to that particular expansion panel as well.

EXPLAINATION: whats happening is that angular material itself is adding margins on .mat-expansion-panel and this styling is overriding our custom styling. !important increases importance(css-specifity) of a css rule.Thus, our rule overrides the default css. enter image description here

Stackblitz

Upvotes: 0

Related Questions