angular - Angular Material：组件样式不正确

Question

我已经使用 Angular Material 10 设置了一个项目。正如您在这个StackBlitz 示例中看到的那样，组件没有正确渲染。

我在控制台中没有收到任何错误。

这是一个已知的错误？

标签： angularangular-material

Answer 1

你导入css文件的方法是正确的，

编辑

回复

但是在这里找到并在这里回答

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

您必须将body带有类的标签添加mat-app=background到您的index.html 或应用程序周围的包装器元素中，以使其正常工作，请参见此处的示例。

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

有用的

Angular 有 3 种不同的方式来为你的应用添加材质主题

1. 内部angular.json文件

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

2. 在style.css文件里面

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

3. index.html文件里面

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