如何更改Angular Material 2 CSS导入顺序？
Kal*_*sev 18 angular-material angular-cli angular
在使用Angular CLI构建的Angular 2应用程序中,我按照官方安装指南设置了Angular 2 Material组件.
Angular 2 Material将其主要CSS样式放在页面中,<head>总是低于我的自定义CSS样式.如果我需要覆盖它们,这会对我产生影响.
如何强制Angular 2 Material将其核心CSS样式置于我在Angular CLI main(entry)CSS文件中定义的样式之上？
小智 5
是的，在 Angular 材质中，它会在元素/组件加载时动态添加实习生 CSS。所以，你不能改变它的顺序。
但是要解决您的问题，您可以使用 CSS 特异性来覆盖它。您可以在主体或应用程序组件中添加自定义类，并且通过使用 SCSS/CSS，您可以使用自己的 CSS 覆盖材料 CSS。
这是使用 SCSS 的示例，用于更改复选框样式。还有project__app类名，我在 app-component 中提到过。您还可以使用 body 代替它，或者在元素的父级上创建一个特定的类。
.project__app
{
/* checkbox customization */
.mat-checkbox-layout
{
margin-bottom: 0px;
}
.mat-checkbox-inner-container
{
height: 20px;
width: 20px;
}
.mat-checkbox-frame {
border-color: rgba(0, 0, 0, 0.5);
border-width: 1px;
}
}
- 这不是解决方案，而是解决方法。但考虑到 Angular Material 的工作原理，没有更好的方法了。 (2认同)
我认为您遇到的问题是由于在 index.html 中引用了一些 css 文件，而在 angular-cli.json 文件中引用了其他文件。
下面是我的 angular.cli json 文件和 index.html 的示例
无论您在 index.html 中定义什么，都将出现在您在 angular-cli.json 文件中定义的内容之前。如果您想对它们重新排序，请在 angular-cli.json 文件中包含对所有 css 文件的引用。
请注意，我的 styles.css 文件是 angular-cli.json 文件中列出的最后一个文件。
编辑（再次重读原始问题后）
我认为您需要创建自己的自定义主题并导入它。
根据 Angular Material 的文档
为了使用 Angular Material 工具设置您自己的组件样式，必须使用 Sass 定义组件的样式。
您所需要做的就是在 custom-component-theme.scss 中创建一个 @mixin 函数
请参阅 Angular Material 有关主题化您自己的组件的文档及其主题化指南
| 归档时间： |
|
| 查看次数： |
1500 次 |
| 最近记录： |