CODEWITHSUNDEEP
cssangulartypescriptfirebaseangular-material
fofana
fofana

Reputation: 21

Angular material styles are not being applied correctly

I just added styles.css file, but the project is created with scss style configuration. I don't know how to have the styles back on my controls.

Upvotes: 2

Views: 4629

Answers (1)

Andrew Halil
Andrew Halil

Reputation: 1323

When the application stylesheet is changed within the Angular application, a reference to the Material themes are likely to be in the original stylesheet that contained the imported theme when Material was installed. This can explain why the build and rendered component scripts do not include Material CSS that are still within the original stylesheet.

To fix this issue, try one of the following:

The Angular Material theme is visible when it is included in one of the following areas of your application:

  1. In Angular.json, within the styles section add the location of the Material theme CSS file:

    "styles": [ "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.css" ],

  2. In styles.css import one of the Material CSS themes as shown:

    @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

Rebuild the application so that the referenced styles are bundled into the scripts.

Upvotes: 4

Related Questions