React组件库开发中切换应用主题时如何正确修改CSS样式？

推荐使用根元素类名绑定主题变量的方案，完全不需要遍历修改CSS变量，实现逻辑更简洁、维护成本更低。

具体实现步骤 #

1. 重构全局CSS变量定义 #

取消default-、theme-xxx-的前缀区分，直接将不同主题的变量绑定到对应类名下：

/* 浅色主题（默认） */
:root, .theme-light {
  --color: #000;
  --background: #fff;
  --color-uibutton: #2d7ff9;
  --background-uibutton: #fff;
  /* 其余所有组件相关变量直接定义即可 */
}

/* 深色主题 */
.theme-dark {
  --color: #fff;
  --background: #121212;
  --color-uibutton: #fff;
  --background-uibutton: #2d7ff9;
  /* 其余深色主题对应变量 */
}

组件代码内直接使用变量即可，不需要额外前缀：

.ui-button {
  color: var(--color-uibutton);
  background: var(--background-uibutton);
}

2. 简化主题切换逻辑 #

切换主题时仅需要修改根元素的类名，无需遍历任何变量：

export const changeTheme = (theme) => {
  const root = document.documentElement;
  // 移除已有的主题类
  root.classList.remove('theme-light', 'theme-dark');
  // 新增当前选中主题的类
  root.classList.add(`theme-${theme}`);
}

方案优势 #

• 无需维护JS侧的CSS变量列表，新增变量仅需要修改CSS文件，避免漏改JS数组导致的样式异常
• 主题切换逻辑精简到2行核心代码，性能远高于遍历修改数十个变量的实现
• 所有主题样式集中在CSS文件中维护，可读性更强，不需要在JS和CSS之间来回切换排查问题
• 扩展性更强，新增主题仅需要添加对应的主题类和变量即可，不需要修改JS逻辑
• 支持局部主题隔离，可将主题类绑定到任意父元素上实现局部区域的独立主题

扩展能力 #

如果需要支持跟随系统自动切换主题，可直接新增媒体查询配置：

@media (prefers-color-scheme: dark) {
  :root:not([class*="theme-"]) {
    /* 系统深色主题下的默认变量配置 */
  }
}

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