在JavaScript/React中动态加载和卸载css文件内容

Question

这几天来我一直在用我的头来对付它。我看了所有类似的问题，但它们不太符合我需要的。

我觉得很难相信没有人尝试过，或记录过，这之前，我想要一些想法，如何处理这一点。

要求
我正在为我的应用程序使用react引导程序，我想让用户在一组引导主题之间进行选择。为了保持简单，我目前只有一个光明和一个黑暗。这些样式是https://bootswatch.com/提供的scss，所以我不想尝试JS主题中的常见CSS方法。

理想情况下，我想要的是有条件地呈现/导入css文件的能力。我试过一些东西，其中大多数都不起作用，有一个可以起作用，但真的很糟糕。

我想要的是一种从css文件构造一个带有样式节点的DOM节点，而不是呈现它的方法。然后我可以将所有这些样式节点放入DOM中，并有选择地添加/移除它们。

理想情况下，我根本不需要手动更改DOM。我一直没能找到做这件事的方法。我希望style组件的条件呈现能起到作用，但这并不起作用，因为style从来不加载（超过第一次）或卸载（永远）。

我到目前为止所尝试的
使用惰性加载（工作方式）
我将css放在一个轻量级组件中，例如

import React from 'react';
import './_light.scss';
const Theme = React.forwardRef(( props, ref) => (<div ref={ref}></div>));
export default Theme;```

然后我懒得加载其中一个或在我的应用程序中，就像这样

const LightTheme = React.lazy(() => import('../themes/lightTheme'));
const DarkTheme = React.lazy(() => import('../themes/darkTheme'));

....

const element = (chosenTheme === PreferredTheme.LIGHT) ?
        <LightTheme /> : <DarkTheme />

...


 return (
        <ThemeContext.Provider value={initialValue}>
            <React.Suspense fallback="{<></>}">
                {element}
            </React.Suspense>
            {children}
        </ThemeContext.Provider>
    )

问题是，我给了用户切换主题的选择，似乎发生了两个问题：1）一旦两个都加载了（一次），他们就不会再加载；2）样式节点的顺序很重要，所以无论哪一个最后加载都会一直保持活动状态。

通过在我的useEffect中执行一些hacky节点操作，将（不再使用的样式）/添加（要应用的）样式节点删除到DOM，我能够解决这一问题，但这充其量也是hacky的。

useRef
要获得对每个样式节点的引用，请将其保存到一个dict中，然后将其删除。这是以一种有趣的方式中断的，其中引用在第一次呈现时起作用，但在随后的呈现中，引用变成未定义

动态创建样式表
这里的解决方案看起来很有希望如何动态加载/卸载css。问题是我不知道如何在这个场景中找到样式表的inner text。正如我所说的，它是作为scss运来的，所以它得到了预处理，我甚至不知道如何才能得到文本。

任何想法或解释都非常感谢。

Answer 1

为什么不将主题指定为应用程序顶层元素的类，并使用CSS变量构建CSS类呢？

#app.dark {
  --app-bg: black;
  --app-fg: white;
}
#app.light {
  --app-bg: white
  --app-fg: black;
}
#app {
  background-color: var(--app-bg);
  color: var(--app-fg);
}

您确实可以使用一个更高阶的组件来包装您的UI，并根据所选主题更改它，并且使用Webpack进行延迟加载（如果值得的话）。FWIW,我的经验是黑暗/光明主题是最容易和最清楚的处理如上。