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

问题描述

我使用Angular Material2.

I use Angular Material 2.

素材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屋！