Question

我正在尝试为角度4项目设置Angular Material。

我跟着how to get started guide并且除了一些事情之外几乎拥有所有东西

添加color="primary"
工具栏的字体系列似乎不对，事实上，我认为它试图获取的CSS不正确。
不需要自定义材料组件的字体系列很奇怪

我使用angular-cli 1.4.9

Answer 1

在style.css中添加以下代码

for (WebElement ele : monthlist) {
            System.out.println(ele.getText());
            String[] fbmonth = ele.getText().trim().split("\n");
            for(j=0;j<fbmonth.length;j++) {
                System.out.println("fbmonth" +j +"="+ fbmonth[j] );
                if (fbmonth[j].equals(month)) {
                    System.out.println(fbmonth[j] + " project is displaying");

                }
            }



        }

Answer 2

在一个在多项目工作区中练习库的简单应用程序中，工具栏仍未设置白色背景。

我可以通过在styles.scss文件中添加以下导入语句来解决此问题：

@import '~@angular/material/prebuilt-themes/indigo-pink.css'

Answer 3

~~您的代码没有任何问题。你可以在你的DevTools中检查mat-primary类是否适用于你的工具栏？~~

更新：您似乎错过了mat-toolbar工作所需的模块。将MatToolbarModule添加到您应用的模块中：
```
import {
    MatToolbarModule,
    // Other module imports
} from '@angular/material';

@NgModule({
    imports: [
        MatToolbarModule,
        // Other modules go here
    ]
})
```

那是因为你错过了Roboto的CSS。在您应用的index.html中添加导入CSS：

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>

您应该为mat-typography中的body元素添加index.html样式：
```
<body class="mat-typography">
    <app-root></app-root>
</body>
```
或者，将以下样式添加到styles.scss：
```
body {
    font-family: Roboto, sans-serif;
}
```

Answer 4

  <mat-toolbar color="primary">
  <button
    mat-icon-button
    class="cursor-pointer example-icon favorite-icon"
    aria-label="Example icon-button with heart icon"
    (click)="dataStorerService.sidenavOpen = !dataStorerService.sidenavOpen"
  >
    <mat-icon>menu</mat-icon>
  </button>

  <span>Dashboard</span>
  <span class="example-spacer"></span>
</mat-toolbar>

这是我的代码，但原色没有反映在浏览器中。在styles.scss文件中导入以下内容

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

变化开始体现

面临问题的原因： 有时在使用命令将 Angular 材料安装到项目时

ng add @angular/material

<块引用>

为自定义主题选择一个预构建的主题名称或“自定义”：（使用方向键）

<块引用>

靛蓝/粉红色 [预览：https://material.angular.io?theme=indigo-pink] 深紫色/琥珀色 [ 预览：https://material.angular.io?theme=deeppurple-amber ]
粉色/蓝灰色 [预览： https://material.angular.io?theme=pink-bluegrey ] 紫色/绿色
[预览：https://material.angular.io?theme=purple-green]
自定义

如果主题安装不正确，也可能导致这个问题！

Answer 5

无需添加color =“ primary”。

只需通过以下方式覆盖CSS中mat-toolbar的颜色：

.mat-toolbar {
   background: teal;
   color: #fff
}

要知道要覆盖哪个CSS类，请在浏览器中检查元素，然后查看基础CSS类。

Answer 6

验证主题 CSS 是否添加到 angular.json 下的 projects/architect/build/options 中：

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.less"
],

然后重新运行 ng serve。

Answer 7

我只能找到这两个：

应该在primary

中的类中定义和导出

app.component.ts

和app.component.scss应为app.component.css。

export class AppComponent {
  title = 'app';
  primary = 'red';
}

您需要在{{primary}}文件中使用app.component.html告诉您希望填充角色。

Angular 4材质工具栏颜色不变

7 个答案: