如何将style.css放置在由angular材料添加的样式标签后面

我已经在我的项目中添加了角材质，在创建了一个自定义主题后，我想改变。mat-fab的风格。

_theme.scss:

@use '~@angular/material' as mat;
@include mat.core();
$wb-nightblue: ( ... );
$wb-yellow: ( ... );
$wb-primary: mat.define-palette($wb-nightblue);
$wb-accent: mat.define-palette($wb-yellow, 500, 300, 800);
$wb-warn: mat.define-palette(mat.$red-palette);
$wb-theme: mat.define-dark-theme((color: (primary: $wb-primary, accent: $wb-accent, warn: $wb-warn)));
@include mat.all-component-themes($wb-theme);
.mat-fab {
border-radius: 3px;
}

styles.scss:

/* You can add global styles to this file, and also import other style files */
@import '_theme';

mat-fab按钮仍然没有显示自定义的边框半径。用开发工具查看页面，我可以看到我的css规则存在，但它被默认的材料样式覆盖了。显然，angular材料在HTML头的末尾添加了四个<style>-标签，就在我的样式表被angular添加之后，然后覆盖我添加的样式。

...
<link rel="stylesheet" href="styles.css">
<style>/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJhcHAuY29tcG9uZW50LnNjc3MifQ== */</style>
<style>.mat-button .mat-button-focu...</style> // contains a lot of angular material button related styles.
<style>.mat-icon{background-repeat:...</style> // contains some angular material icon related styles.
<style>/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJtYXAuY29tcG9uZW50LnNjc3MifQ== */</style>
</head>

现在这个构造当然使我几乎不可能在不诉诸!important的情况下覆盖默认按钮样式。我不知道sourceMappingURL样式在做什么，但我猜它们负责添加其他两个标签。我试着在我的项目中寻找它们，但没有找到任何东西。谷歌也没帮上什么忙。如果我只是通过开发人员工具删除html中的样式，那么按钮就缺乏适当的材料样式，所以它们是必需的，但是我想把我的样式。css放在html头部的末尾，这样我就可以覆盖我想要的部分。

我也检查了angular。json的任何样式条目，但唯一的一个是我的样式。css，这并不奇怪，因为我有其他的样式表链接在那里，而不是直接的<style>标签。

是否有办法让我的样式表到头部的结束?

UPDATE

下面的代码不起作用的原因与Angular无关，而是与CSS有关。

.mat-fab {
border-radius: 3px;
}

基本上，CSS根据样式的具体程度来应用样式。如果你想让一个样式应用到另一个样式上，你需要更具体地说明它。

你可以在这里阅读更多。

现在来看可能的解决方案，有三种:

important!:使您的样式始终应用于另一个样式的方法是使用important!属性。这意味着你的样式只会被另一个具有important!的样式覆盖，该样式比你的样式更具体。

考虑到Angular Material避免了important!，这种情况发生的变化很小。那么解决方案就是:

.mat-fab {
border-radius: 3px !important;
}

更具体的材质样式:很多人认为使用important!表示CSS写得不好。另一种方法是更具体地说明我们想要覆盖的样式，像这样:

.mat-button-base.mat-fab {
border-radius: 3px;
}

在这种情况下，我们使用Material的自己的类来指定，我们想要应用我们的风格不只是mat-fab，但对包含mat-fab和mat-button-base的html元素。mat-button-base类是Angular Material中所有按钮共享的一个类。

定义你自己的类并组合起来:与之前的建议类似，而不是使用角材质，你可以创建自己的类，并将其与mat-fab组合，如下所示:

.border-3.mat-fab {
border-radius: 3px;
}

在html中你应该有:

<button mat-fab class="border-3">
<mat-icon><!-- Icon here --></mat-icon>
</button>

如果有些东西你将使用原始材料样式，有时使用你自己的样式，这种方法就更清晰了。

请记住，在任何情况下，样式都需要在全局样式表中定义。

根据官方文档，如果你想覆盖材质组件的样式，你应该创建一个包含所有自定义样式的文件，然后将其传递给stylesangular.json.

上面描述了如何找到它:

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app-name": {
...
"architect": {
"build": {
"options": {
...
// Add the file here.
"styles": [
// By default, Angular adds the material theme you choose and the src/style.scss file, see below
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
}  
}
}
}
}
}

您正在编辑的文件与主题(调色板等)有关。

一个例子是src/style.scss文件。默认情况下，创建这个文件是为了允许你创建应用于所有HTML元素和组件的css。考虑到上述内容，我建议您将代码添加到src/style.scss中。文件如下:

/* You can add global styles to this file, and also import other style files */
.mat-fab {
border-radius: 3px;
}

UPDATE

相关内容

最新更新

热门标签：