如何在React中动态切换CSS文件实现主题切换？

方案1：动态创建/替换link标签（最通用） #

这是兼容性最好的实现方式，不需要依赖任何框架或构建工具，直接操作DOM就能完成主题切换：

const handleThemeChange = (selectedTheme) => {
  // 查找页面中已存在的主题样式标签
  let themeStyleTag = document.getElementById('dynamic-theme-link');
  
  // 如果不存在，创建一个新的link标签并插入到head中
  if (!themeStyleTag) {
    themeStyleTag = document.createElement('link');
    themeStyleTag.id = 'dynamic-theme-link';
    themeStyleTag.rel = 'stylesheet';
    document.head.appendChild(themeStyleTag);
  }
  
  // 根据选中的主题更新href属性，加载对应的CSS文件
  themeStyleTag.href = `${selectedTheme}.css`;
};

把这个函数绑定到你的ThemeSwitch组件的变化事件上即可。切换时浏览器会自动加载新的CSS文件并替换旧的样式，实现主题切换效果。

方案2：ES动态导入（适合框架项目） #

如果你的项目用了React、Vue这类框架，并且使用Webpack/Vite等构建工具，可以用ES的动态import语法来按需加载主题CSS：

以React为例：

const handleThemeChange = async (selectedTheme) => {
  // 清除之前加载的主题模块缓存（避免样式叠加）
  Object.keys(require.cache).forEach(cacheKey => {
    if (cacheKey.includes('light.css') || cacheKey.includes('dark.css')) {
      delete require.cache[cacheKey];
    }
  });
  
  // 动态导入选中的主题文件
  await import(`./${selectedTheme}.css`);
};

注意：这种方式需要构建工具支持动态import的解析，而且如果多次切换主题，需要处理模块缓存问题，否则旧的主题样式会和新的叠加。

补充：更高效的替代方案（无需动态导入文件） #

如果不想每次切换都加载新的CSS文件，可以把两个主题的样式都写在同一个文件（或一次性加载两个文件），然后通过给根元素切换类名来切换主题：

比如合并后的CSS内容：

.light-theme {
  background-color: #fff;
  color: #333;
}

.dark-theme {
  background-color: #333;
  color: #fff;
}

然后切换时修改根元素的类名：

const handleThemeChange = (selectedTheme) => {
  document.documentElement.className = `${selectedTheme}-theme`;
};

这种方式加载一次样式后就无需再请求文件，切换速度更快，适合主题样式不太大的场景。

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