Angular 中的 SCSS 7 到 1 - 样式优先级不正确？

Question

我目前正在使用 7 对 1 SCSS 文件夹结构和 Angular Material 主题开发一个 Angular 项目。

Angular material 有一个 <mat-chip> 组件，我想在某些情况下更改元素样式的各个方面。

我有一个 main.scss 文件，它从 7 到 1 个子文件夹中提取样式。

@use 'themes/indigo-pink';

@use 'base/base';

@use 'layout/flex';

@use 'components/_mat-card-title';
@use 'components/mat-chip';
@use 'components/h1';
@use 'components/h2';
@use 'components/fieldset';
@use 'components/button';
@use 'components/mat-chip-list';
@use 'components/input';

如您所见，我首先导入了 Angular Material 的默认主题之一，这样我对样式所做的任何更改都会覆盖主题 css 文件中的内容。

我的问题是 'themes/indigo-pink' 中的 class 似乎优先于我在 'components/mat-chip' 中的 class。

'components/mat-chip' 包含一个名为 'mat-static-chip' 的 class，主题文件中的 class 似乎优先于它。

有人可以解释为什么会这样吗？

Answer 1

首先，如果图书馆不提供样式，您应该避免更改图书馆的样式。

这不仅不尊重他们实施的设计系统，有时还会完全破坏组件。

我不是说你不应该，我只是说，要小心。

其次，这是由于您的样式的优先级。根据选择器的精度应用样式。

基本主题使用 .mat-chip.mat-standard-chip（2 classes），而您使用 .mat-static-chip（1 class）。

改为使用此选项：mat-chip.mat-chip.mat-static-chip（1 个标签，2 个 classes）。这样，无论导入顺序如何，每次都会应用您的样式。

Angular 中的 SCSS 7 到 1 - 样式优先级不正确？

SCSS 7 to 1 in Angular - Incorrect style precedence?

css

sass

angular-material

angular