是否可以有条件地在 React 中加载某个 css 文件答案

【问题标题】：Is is possible to conditionally load a certain css file in React是否可以有条件地在 React 中加载某个 css 文件
【发布时间】：2021-11-24 10:17:24
【问题描述】：

所以我有一个当前在 React v17.0.2 中运行的前端应用程序，我需要有条件地加载一个 css 文件。我有一个 html 开关可以在暗模式和亮模式之间切换，目前我有这段代码，它在 localhost 上完美运行：

function App() {
    const { Content } = Layout;

    const rootStore = useContext(RootStoreContext);
    const { token, appLoading, setAppLoading, lightMode } = rootStore.commonStore;
    const { getUser } = rootStore.userStore;
    
    if (lightMode) { 
        require('antd/dist/antd.css');
    }
    else {
        require('antd/dist/antd.dark.css');
    }

就像我说的代码在 localhost 上完美运行，但是当我将它部署到 azure 并单击开关更改主题时，我收到以下错误：

VM648:3 Uncaught TypeError: Cannot read properties of undefined (reading 'cosmeticStyleSheet')
    at <anonymous>:3:39
    at <anonymous>:26:11

所以我假设我的做法是错误的，那么正确的做法是什么？

感谢您的指导！

【问题讨论】：

不完全确定这是您需要的，但 antd documentation 讨论了如何使用 ConfigProvider 和一些 css 变量来做到这一点
不幸的是，这仍处于实验阶段，在我的环境中不会被接受

标签： reactjs typescript react-hooks antd

【解决方案1】：

我们对谷歌搜索的重新措辞提出了一个类似的问题

在这里回答： conditional css in create-react-app

【讨论】：