Por fin después de mucho luchar pudimos hallar la respuesta de este apuro que muchos los usuarios de nuestro espacio presentan. Si deseas aportar algún detalle no dudes en aportar tu comentario.
Solución:
Tienes que importar un tema a tu archivo css o sass global:
@import "[email protected]/material/prebuilt-themes/indigo-pink.css";
o, alternativamente, inclúyalo en su index.html expediente:
Como en la documentación de temas ya mencionada, Angular Material proporciona los siguientes temas prediseñados:
- deeppurple-amber.css
- índigo-rosa.css
- rosa-azulgris.css
- morado-verde.css
Tienes que incluir uno de estos temas o puedes crear tu propio tema personalizado.
Agregando @import a styles.css no funciona para mí, agregando tema a angular.json Hizo el truco
Puede reemplazar el tema de material angular predeterminado con uno de los temas de material angular mencionados anteriormente de las siguientes maneras.
Puede incluir directamente el tema de material angular prediseñado en el archivo styles.css.
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
O agregue lo siguiente dentro de la etiqueta principal del archivo index.html.
O actualice lo siguiente en el archivo angular.json.
"styles": [
"input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
,
"src/styles.css"
],
Puedes añadir valor a nuestro contenido colaborando tu experiencia en las aclaraciones.