React条件加载CSS本地正常 部署Azure切换主题报错如何解决

你在组件渲染逻辑中直接使用require()动态加载CSS的实现，仅适配本地开发环境的打包规则。生产构建部署到Azure后，打包工具对动态CSS chunk的运行时加载逻辑与本地开发环境存在差异，才会触发cosmeticStyleSheet相关的报错。同时该实现还存在重复加载CSS、新旧主题样式冲突的隐患。

方案一：动态操作link标签加载样式（兼容性最高） #

完全绕过打包工具的动态资源处理逻辑，直接操作DOM加载对应主题的样式文件，部署到任意平台都不会出现兼容问题：

1. 先将antd.css和antd.dark.css两个文件放到项目的public静态资源目录下，避免被打包工具二次处理
2. 修改组件逻辑，用useEffect监听主题切换，动态增删样式标签：

import { useEffect } from 'react';
function App() {
    const { Content } = Layout;
    const rootStore = useContext(RootStoreContext);
    const { token, appLoading, setAppLoading, lightMode } = rootStore.commonStore;
    const { getUser } = rootStore.userStore;

    useEffect(() => {
        // 移除之前加载的主题样式
        const existStyle = document.getElementById('antd-theme-link');
        if(existStyle) existStyle.remove();

        // 创建新的样式标签
        const themeLink = document.createElement('link');
        themeLink.id = 'antd-theme-link';
        themeLink.rel = 'stylesheet';
        themeLink.href = lightMode ? '/antd/antd.css' : '/antd/antd.dark.css';
        document.head.appendChild(themeLink);
    }, [lightMode])

    // 剩余原有逻辑
    // ...
}

方案二：预加载双主题样式通过类名隔离（切换无延迟） #

如果对主题切换的响应速度要求高，可以提前给两份主题CSS增加不同的全局类名前缀，预加载所有样式后通过顶层容器类名控制生效：

// 提前引入已经加过类名前缀的两份主题样式
import './assets/antd-light.css';
import './assets/antd-dark.css';

function App() {
    const { lightMode } = rootStore.commonStore;
    return (
        <div className={lightMode ? 'antd-light' : 'antd-dark'}>
            <Content />
            {/* 其余应用内容 */}
        </div>
    )
}

方案三：升级到antd v5使用原生CSS变量主题 #

如果项目允许升级依赖，antd v5原生支持基于CSS变量的动态主题切换，不需要加载多份CSS文件，仅需修改全局配置即可完成主题切换，是目前最优的主题切换实现方案。

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