SharePoint SPFx项目中TypeScript文件内DefaultButton背景色无法修改

• CSS Modules类名绑定错误：SPFx默认开启SCSS的CSS Modules模块化编译，所有类名编译后会自动添加哈希后缀，代码中直接传递字符串custombutton无法匹配到编译后的类名，自定义样式完全没有生效。
• Fluent UI组件样式优先级更高：DefaultButton自带的内置样式选择器优先级高于普通自定义类，即使类名绑定正确，自定义样式也会被默认样式覆盖。

第一步：修正类名绑定 #

修改TSX文件中按钮的className属性，引用SCSS模块导出的类名即可匹配编译后的哈希类名：

// 原错误写法
<DefaultButton className="custombutton" onClick={(e) => this.Buttonclick(e, 'our-value')} text="Our Value" />
// 修改后正确写法
<DefaultButton className={styles.custombutton} onClick={(e) => this.Buttonclick(e, 'our-value')} text="Our Value" />
// 第二个按钮同理修改
<DefaultButton className={styles.custombutton} onClick={(e) => this.Buttonclick(e, 'who-we-are')} text="Who We Are" />

第二步：提升自定义样式优先级 #

修改ModalPopup.module.scss中的custombutton样式，强制覆盖Fluent UI的默认样式，同时补全交互状态的样式避免hover、点击时样式回退：

.custombutton {
  background-color: #2488d8 !important;
  color: white !important;
  border-color: #2488d8 !important;

  /* 覆盖hover状态 */
  &:hover {
    background-color: #1a6cad !important;
    color: white !important;
    border-color: #1a6cad !important;
  }

  /* 覆盖点击状态 */
  &:active {
    background-color: #14558a !important;
    color: white !important;
    border-color: #14558a !important;
  }
}

可选更规范方案：使用Fluent UI原生样式属性 #

如果不想使用!important，可以直接通过DefaultButton自带的styles属性覆盖内置样式，优先级最高且不会污染全局样式：

// 在render方法内定义样式
const customBtnStyles = {
  root: {
    backgroundColor: '#2488d8',
    color: 'white',
    borderColor: '#2488d8'
  },
  rootHovered: {
    backgroundColor: '#1a6cad',
    color: 'white',
    borderColor: '#1a6cad'
  },
  rootPressed: {
    backgroundColor: '#14558a',
    color: 'white',
    borderColor: '#14558a'
  }
}

// 按钮绑定styles属性，不需要额外自定义类
<DefaultButton styles={customBtnStyles} onClick={(e) => this.Buttonclick(e, 'our-value')} text="Our Value" />

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