来自 styles.scss 的 Angular 样式并不总是被应用

Question

我在基于 Angular 12 的网站上向不同的垫按钮添加了一些 CSS 属性。为了不意外地将这些属性应用到所有垫子按钮，而只应用到我想应用它们的按钮，我向按钮添加了一个 class 并用它来设置 CSS 属性，例如这个：

组件html文件：

<a class="menu-button" mat-button>
  <img class ="menu-button-image" src="assets/images/example.png">
  <div>Example text</div>
</a>

组件 css 文件：

.menu-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
}

.menu-button-image {
  width: 200px;
  height: 200px;
}

只要我在组件的 scss 文件中保留 css 代码就可以正常工作，但是因为我不想在每个组件中都将其作为冗余代码我想应用这些属性，我将它移到了 styles.scss 文件中。这样做之后，只应用了一些属性，但有些属性似乎是 overwritten/ignored：

为什么会发生这种情况，我该如何预防？

Answer 1

重写了这些样式。使用 !important:

styles.scss:

.menu-button {
  width: 300px !important;
  height: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  align-content: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
}

.menu-button-image {
  width: 200px !important;
  height: 200px !important;
}

请记住，使用 !important 不是最佳做法：Is it bad to use !important in a CSS property?

Answer 2

可能 material 按钮的 css 是在 style.scss 的类之后加载的，并且选择器具有相同的重要性，因此稍后加载的会获胜并覆盖定义, 它们都在类.

中

应该起作用的是，例如通过结合类

来增加特定定义的重要性

.mat-button {
  &.menu-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
 }
}

.mat-button.menu-button 将优先于 .mat-button

另一种解决方案是创建您自己的按钮组件来包装 material 按钮。您可以将自定义项 css 放在那里，并可以在应用程序中轻松重复使用它。

Answer 3

这是因为浏览器呈现每个属性以查看是否应该应用它，例如 user-select 的某些前缀值被覆盖。所以浏览器忽略了这些值并转到直接值。

正如您在代码片段中看到的，某些 flex 未应用，因此被浏览器忽略（line-through）

.menu-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
  background-color: red;
}

.menu-button-image {
  position: relative;
  width: 200px;
  height: 200px;
}

<a class="menu-button" mat-button>
  <img class="menu-button-image" src="assets/images/example.png">
  <div>Example text</div>
</a>

使用 align-items: center 应用属性并将内容居中对齐，以便应用值

.menu-button {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1.5;
  background-color: red;
}

.menu-button-image {
  width: 200px;
  height: 200px;
}

<a class="menu-button" mat-button>
  <img class="menu-button-image" src="assets/images/example.png">
  <div>Example text</div>
</a>

来自 styles.scss 的 Angular 样式并不总是被应用

Angular styles from styles.scss are not always being applied

html

css

angular

angular12