Material angular: componentes não estilizados corretamente

Question

Eu configurei um projeto usando Angular Material 10. Os componentes não estão renderizando corretamente, como você pode ver neste exemplo StackBlitz .

Não recebo nenhum erro no console.

Isto é um erro conhecido?

Answer 1

A maneira de importar o arquivo css está correta,

editar

Resposta

Mas como encontrado aqui e também respondido aqui

Finalmente, se o conteúdo do seu aplicativo não for colocado dentro de um elemento mat-sidenav-container, você precisará adicionar a classe mat-app-background ao seu elemento wrapper (por exemplo, o corpo). Isso garante que o fundo do tema adequado seja aplicado à sua página.

Você precisa adicionar a bodytag com a mat-app=backgroundclasse ao seu index.html ou a um elemento wrapper em torno do aplicativo para fazê-lo funcionar, veja aqui o exemplo .

Observe que se você adicioná-lo ao apppróprio nó, também precisará de umdisplay: block

Útil

Angular tem 3 maneiras diferentes de adicionar tema material ao seu aplicativo

1. angular.jsonArquivo interno

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

1. dentro do style.cssarquivo

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

1. Dentro do index.htmlarquivo

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

Answer 2

Você deve incluir um tema em seu styles.css, por exemplo:

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

E incluir uma referência ao styles.cssno index.htmlda seguinte forma:

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

Ou se preferir não usar o styles.css, você pode incluir o tema em index.html:

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

Referência: https://material.angular.io/guide/theming