1

I have set up a project using Angular Material 10. The components are not rendering properly as you can see in this StackBlitz example.

I don't get any error in the console.

Is this a known bug?

Christopher Peisert
  • 21,862
  • 3
  • 86
  • 117
gaetann
  • 91
  • 1
  • 7
  • Did you use [`ng add @angular/material`](https://material.angular.io/guide/getting-started) to add Material to your existing Angular project? – pzaenger Oct 04 '20 at 13:45
  • yes i did and i had the same issue as with my example – gaetann Oct 04 '20 at 13:47
  • Does this answer your question? [Angular Material Style Class not working](https://stackoverflow.com/questions/48286202/angular-material-style-class-not-working) – Christopher Peisert Oct 04 '20 at 13:59
  • The way you import it is right. I tried to add `indigo-pink.css` in your `angular.json` instead of the `purple-green.css` and it worked. Tried the `pink-bluegrey.css` and then, same bug but the color changed... I think this it may be some angular bug. – Raphaël Balet Oct 04 '20 at 14:11
  • @rbalet you are right thank you! i tried a different theme and it worked. I had this setup with angular 8 and it was working fine so it's a bug indeed – gaetann Oct 04 '20 at 14:46
  • @gaetann I've opened and bug report https://github.com/angular/components/issues/20716 – Raphaël Balet Oct 04 '20 at 15:44
  • @gaetann As say [here](github.com/angular/components/issues/20716) it isn't a bug, but the way angular display dark theme. I've updated my answer to explain how it work – Raphaël Balet Oct 06 '20 at 07:29

2 Answers2

2

You're way to import the css file is correct,

edit

Response

But as found here and also answered here

Finally, if your app's content is not placed inside of a mat-sidenav-container element, you need to add the mat-app-background class to your wrapper element (for example the body). This ensures that the proper theme background is applied to your page.

You have to add the body tag with the mat-app=background class to your index.html or to a wrapper element around the app to make it work see here for the example.

Note that if you add it to the app node itself, you'll also need a display: block

Usefull

Angular have 3 different ways to add material theme to your app

  1. Inside angular.json file
"styles": [
  "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
  "src/styles.scss"
],
  1. inside the style.css file
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
  1. Inside the index.html file
<link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">
Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78
0

You have to include a theme in your styles.css, for example:

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

And include a reference to styles.css in index.html as follows:

<head>
  <link href="styles.css" rel="stylesheet">
</head>

Or if you prefer not using the styles.css, you can include the theme in the index.html:

<head>
  <link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">
</head>

Reference: https://material.angular.io/guide/theming

francisco neto
  • 797
  • 1
  • 5
  • 13