gpt4 book ai didi

angular - 如何更改 Angular Material 2 CSS 导入顺序?

转载 作者:太空狗 更新时间:2023-10-29 16:56:54 27 4
gpt4 key购买 nike

在使用 Angular CLI 构建的 Angular 2 应用程序上, 我已经设置了 Angular 2 Material components以下 official installation guide .

Angular 2 Material 将其主要 CSS 样式放置在页面中 <head>始终低于我的自定义 CSS 样式。如果我需要覆盖它们,这会对我产生影响。

我如何强制 Angular 2 Material 将其核心 CSS 样式放置在我在 Angular CLI 主(入口)CSS 文件中定义的样式之上

enter image description here

最佳答案

是的,在 Angular Material 中,它会在元素/组件加载时动态添加实习生 CSS。因此,您无法更改其顺序。

但要解决您的问题,您可以使用 CSS 特异性来覆盖它。您可以在正文或应用程序组件中添加自定义类,并且通过使用 SCSS/CSS,您可以使用自己的 CSS 覆盖 Material 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 - 如何更改 Angular Material 2 CSS 导入顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42529838/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com