SCSS及其变量配合MUI v5组件使用的最佳实践

问题背景 #

我正在启动一个React项目，计划使用SCSS编写样式，同时采用MUI开发部分组件。
我了解到部分MUI组件无法直接通过普通SCSS类覆盖属性，官方通常推荐使用styled API实现样式定制；但实际开发中我发现，直接在SCSS类中添加!important标记也能实现相同的覆盖效果。
本次以定制AppBar组件、覆盖其background-color属性为场景，对比两种实现方案，确认最佳实践及原因，同时寻找更优的替代方案。

方案一：使用styled API包装组件（当前使用方案） #

相关文件代码 #

header.tsx

import { styled } from '@mui/system';
import variables from '../../../styles/_variables.scss'
import './header.scss';

const MyAppBar = styled(AppBar)({
  backgroundColor: variables.blue,
});

// 组件使用
<MyAppBar className="Header" id="topbar">
  {/* 组件内容 */}
</MyAppBar>

header.scss

@import '../../../styles/styles.scss';

.Header {
  justify-content: space-between;
  height: 50px;
}

_variables.scss（原文笔误标注为_variables.css）

/* COLORS */
$blue: #155092;

:export {
    blue: $blue;
}

• 方案特点：功能可正常生效，但需要额外创建styled包装组件，还需要在SCSS文件中配置变量导出，整体实现流程略显繁琐。

方案二：使用!important强制覆盖样式 #

核心逻辑为移除styled包装组件，直接在header.tsx中使用原生AppBar组件，为其绑定Header作为className。

相关文件代码 #

header.tsx

import './header.scss';

<AppBar className="Header" id="topbar">
  {/* 组件内容 */}
</AppBar>

header.scss

@import '../../../styles/styles.scss';

.Header {
  justify-content: space-between;
  height: 50px;
  background-color: $blue !important;
}

• 方案特点：实现更轻量化，代码更简洁，但!important写法普遍被认为不符合CSS规范，可扩展性较差。

选型结论 #

第一种使用styled API的方案是符合MUI生态规范的最佳实践，不推荐在项目中大范围使用!important覆盖样式，核心原因如下：

• !important本质是破坏CSS原生优先级链路的补丁写法，当前单属性覆盖看似省事，后续如果需要添加hover/active状态样式、响应式适配、暗色模式切换时，所有涉及该属性的覆盖规则都需要叠加!important，多层嵌套后会彻底打乱样式优先级，后续维护改样式全靠试错，成本极高。
• styled API是MUI官方推荐的定制方式，生成的样式和MUI内置样式处于同一CSS-in-JS注入层级，优先级规则和MUI内部逻辑完全对齐，不会出现预期外的样式冲突；同时API原生支持访问全局MUI主题对象，可以直接复用主题内定义的颜色、间距、断点等设计token，后续做全局主题调整时不需要到处查找硬编码值。
• 觉得当前styled方案繁琐，核心原因是同时维护了SCSS变量、MUI样式两套独立的设计token体系，完全可以把通用颜色、间距变量统一定义到MUI主题配置中，省去SCSS变量导出到JS的冗余步骤，流程会简化很多。

更轻量化的替代方案 #

如果觉得单独创建styled包装组件的流程太冗余，可以选择以下几种同样符合规范、代码更简洁的实现方式：

• 简单单属性定制直接用MUI内置的sx属性，直接把样式写在组件属性上即可，不需要额外创建包装组件，同样支持访问全局主题变量。
• 如果项目中所有AppBar都需要统一蓝色背景，直接在MUI全局主题配置中修改AppBar组件的默认样式，一次配置即可在所有用到该组件的位置生效，不需要单独加类名写样式。
• 如果团队约定全量使用SCSS编写样式、不想引入CSS-in-JS写法，也不需要依赖!important：示例中已经给组件加了id="topbar"，ID选择器的优先级天然高于类选择器，直接写#topbar { background-color: $blue; }即可覆盖MUI默认样式，不会破坏CSS优先级规则。

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