javascript Angular 4 材质工具栏颜色不变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46915570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 material toolbar color not changing
提问by Johhan Santana
I'm trying to setup Angular Material for an angular 4 project.
我正在尝试为 angular 4 项目设置 Angular Material。
I followed the how to get started guideand pretty much have everything except a few things
我遵循了如何入门指南，除了一些东西之外几乎什么都有
- Toolbar component doesn't change colors when I add
color="primary" - Font family for toolbar doesn't seem right, in fact, I think the css it's trying to fetch is not correct.
- Font family for stuff that do not required custom material components are weird
- 添加时工具栏组件不会改变颜色
color="primary" - 工具栏的字体系列似乎不正确，事实上，我认为它试图获取的 css 不正确。
- 不需要自定义材料组件的字体系列很奇怪
I've setup a simple repository hereusing angular-cli 1.4.9
我在这里使用 angular-cli 1.4.9设置了一个简单的存储库
回答by Abhijit Kedare
Add below code in style.css
在 style.css 中添加以下代码
.mat-toolbar.mat-primary {
background: #007bff;
color: #fff;
}
回答by Edric
There's nothing wrong with your code. Can you check in your DevTools that themat-primaryclass is applied to your toolbar?UPDATE: It looks like you're missing the module required for
mat-toolbarto work. AddMatToolbarModuleto your app's module:import { MatToolbarModule, // Other module imports } from '@angular/material'; @NgModule({ imports: [ MatToolbarModule, // Other modules go here ] })That's because you're missing the css for Roboto. Add the import CSS in your app's
index.html:<head> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> </head>You should either add
mat-typographystyle to yourbodyelement inindex.html:<body class="mat-typography"> <app-root></app-root> </body>Alternatively, add the following style to your
styles.scss:body { font-family: Roboto, sans-serif; }
你的代码没有任何问题。你能在你的 DevTools 中检查mat-primary该类是否应用于你的工具栏吗？更新：看起来您缺少
mat-toolbar工作所需的模块。添加MatToolbarModule到您的应用程序模块：import { MatToolbarModule, // Other module imports } from '@angular/material'; @NgModule({ imports: [ MatToolbarModule, // Other modules go here ] })那是因为您缺少 Roboto 的 css。在您的应用程序中添加导入 CSS
index.html：<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; }
回答by Stephane
On a simple app that exercises a library in a multi projects workspace, the toolbar remained not styled with a white background.
在一个在多项目工作区中练习库的简单应用程序中，工具栏仍然没有使用白色背景设计。
I could solve the issue by adding in the styles.scssfile, the following import statement:
我可以通过在styles.scss文件中添加以下导入语句来解决这个问题：
@import '~@angular/material/prebuilt-themes/indigo-pink.css'
回答by nammalvar 2.0
I was able to find only these two:
我只能找到这两个：
primaryshould be defined and exported from the class in app.component.ts
primary应该从类中定义和导出 app.component.ts
and app.component.scssshould be app.component.css.
并且app.component.scss应该是app.component.css。
export class AppComponent {
title = 'app';
primary = 'red';
}
and you need to tell angular that you want it to be populated by using {{primary}}in your app.component.htmlfile.
并且您需要告诉 angular 您希望通过{{primary}}在您的app.component.html文件中使用它来填充它。
