Angular 5.x：如何从主题SCSS为组件元素设置样式？

嘿，我帮你梳理下把按钮样式迁移到主题SCSS文件的正确步骤，确保样式正常生效：

步骤1：移除组件SCSS中的原有样式 #

首先，你得把组件SCSS文件里的.button-themed样式删掉——Angular组件默认的样式封装会给样式加专属属性选择器，优先级比全局主题样式高，留着它很容易和主题样式冲突。

步骤2：在主题SCSS文件中添加自定义按钮样式 #

主题文件一般是项目根目录下的theme.scss（或者你正在开发的那个主题文件），这里有两种靠谱的添加方式：

方式一：直接定义全局类样式 #

如果想保留原来的.button-themed类名，直接在主题文件里写：

.button-themed {
  background-color: black;
  color: white;
  border: 1px solid red;
}

这种方式简单直接，只要主题文件是全局引入的，样式就会作用于整个项目。

方式二：结合Angular Material主题系统定制（更推荐） #

既然用的是mat-raised-button，用Material自带的主题混合器来扩展样式，能更好地融入整个项目的主题体系：

// 假设你的主题变量是$custom-theme
@include mat-button-theme($custom-theme);

// 为.button-themed定制样式
.button-themed {
  @include mat-button-color($custom-theme, black, white);
  border: 1px solid red;
  // 还可以继承默认按钮的交互样式，比如hover状态
  @include mat-button-ink-bar($theme);
}

或者封装成自定义主题混合器，方便后续扩展：

@mixin custom-button-theme($theme) {
  .button-themed {
    background-color: black;
    color: white;
    border: 1px solid red;
    // 继承Material按钮的基础交互样式
    @include mat-button-base($theme);
  }
}

// 在主题初始化的地方调用这个混合器
@include custom-button-theme($custom-theme);

步骤3：确保主题文件正确引入到项目中 #

检查你的angular.json配置，把主题SCSS文件添加到全局styles数组里：

"styles": [
  "src/styles.scss",
  "src/theme.scss" // 替换成你的主题文件实际路径
]

如果是模块级别的主题，也可以在对应模块的styles数组里添加，但全局主题还是全局引入更方便。

步骤4：验证并调整样式优先级 #

如果迁移后样式没生效，大概率是优先级问题。打开浏览器开发者工具查看按钮元素的样式，看看主题里的样式是不是被其他样式覆盖了。要是真的被覆盖，可以用更具体的选择器提高优先级：

mat-raised-button.button-themed {
  background-color: black;
  color: white;
  border: 1px solid red;
}

尽量别用!important，除非万不得已——它会打乱样式的优先级逻辑，后续维护很麻烦。

这样操作下来，你的按钮样式应该就能从主题文件正常生效啦！

内容的提问来源于stack exchange，提问作者Rick