角材料:组件的样式不正确

时间:2020-10-04 13:31:29

标签: angular angular-material

我已经使用Angular Material 10建立了一个项目。这些组件无法正确呈现,如您在此StackBlitz example中看到的那样。

控制台上没有任何错误。

这是一个已知的错误吗?

2 个答案:

答案 0 :(得分:1)

您正确导入css文件的方法,

编辑

响应

但是发现here并且也回答了here

最后,如果您的应用程序内容未放置在mat-sidenav-container元素内,则需要将 mat-app-background 类添加到包装器元素(例如主体)中。这样可以确保将正确的主题背景应用于您的页面。

您必须将body类的mat-app=background标签添加到index.html 或应用程序周围的包装元素中,以使其工作{{ 3}}。

请注意,如果将其添加到app节点本身,则还需要一个display: block

Usefull

Angular有3种不同的方法可以向您的应用添加素材主题

  1. 内部angular.json文件
"styles": [
  "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
  "src/styles.scss"
],
  1. style.css文件中
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

  1. index.html文件中
<link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">

答案 1 :(得分:0)

您必须在styles.css中包含一个主题,例如:

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

并在styles.css中包括对index.html的引用,如下所示:

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

或者,如果您不想使用styles.css,则可以在index.html中包含主题:

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

参考:https://material.angular.io/guide/theming