我已经在我的项目中添加了角材质,在创建了一个自定义主题后,我想改变。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;
}