CODEWITHSUNDEEP
angularangular-material
gaetann
gaetann

Reputation: 101

Angular Material: Components not styled correctly

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?

Upvotes: 1

Views: 4036

Answers (2)

Raphaël Balet
Raphaël Balet

Reputation: 8491

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">

Upvotes: 2

francisco neto
francisco neto

Reputation: 807

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

Upvotes: 0

Related Questions