Material angular: los componentes no están diseñados correctamente

Question

He configurado un proyecto usando Angular Material 10. Los componentes no se están renderizando correctamente como puede ver en este ejemplo de StackBlitz .

No obtengo ningún error en la consola.

¿Es esto un error conocido?

Answer 1

Su forma de importar el archivo css es correcta,

editar

Respuesta

Pero como se encuentra aquí y también se responde aquí

Finalmente, si el contenido de su aplicación no se coloca dentro de un elemento mat-sidenav-container, debe agregar la clase mat-app-background a su elemento contenedor (por ejemplo, el cuerpo). Esto asegura que se aplique el fondo del tema adecuado a su página.

Debe agregar la bodyetiqueta con la mat-app=backgroundclase a su index.html o a un elemento de envoltura alrededor de la aplicación para que funcione, vea aquí el ejemplo .

Tenga en cuenta que si lo agrega al appnodo en sí, también necesitará undisplay: block

Útil

Angular tiene 3 formas diferentes de agregar temas de material a su aplicación

1. angular.jsonArchivo interior

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

1. dentro del style.cssarchivo

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

1. Dentro del index.htmlarchivo

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

Answer 2

Tienes que incluir un tema en tu styles.css, por ejemplo:

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

E incluir una referencia a la styles.cssde index.htmlla siguiente manera:

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

O si prefiere no usar el styles.css, puede incluir el tema en index.html:

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

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