如何覆盖材质 CSS 样式? [英] How to override material CSS styles?

问题描述

我使用 Angular Material 2.

I use Angular Material 2.

material CSS 中有一种 CSS 样式:

There is one CSS style in material CSS:

.mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: #fff;
}

我尝试在自定义 CSS 文件中覆盖它，例如:

I tried to override it in custom CSS file like:

.mat-radio-button.mat-accent .mat-radio-inner-circle {   background-color: red !important; }

我也试过这个:

/deep/ .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: red !important;
}

它不起作用，如何正确执行此操作以及在哪个位置执行此操作?

It does not work, how to do this right and in which place?

推荐答案

您可以在全局样式表 (style.scss) 或任何不 封装.

You do it in your global style sheet (style.scss), or in any style sheet that is not encapsulated.

要覆盖，请通过检查浏览器中的 HTML 元素来获取选择器，并覆盖所需的属性.

To override, take the selector by inspecting the HTML element in your browser, and override the property you want.

如果仍然失败，您可以使用 !important 强制应用样式.

If it still fails, you can use !important to force the style to be applied.

记得在你的 angular.json 文件中对你的样式表导入进行排序(谢谢@SurenSrapyan 提醒我)

Remember to order your style sheet imports in your angular.json file too (thank you @SurenSrapyan for reminding me)

这篇关于如何覆盖材质 CSS 样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！