在React.JS中有条件地导入.css文件的方法吗

Question

我正试图在我的项目中添加一个暗模式。如果没有React，我只会将触发模式切换的DOM元素作为目标，并链接我的自定义dark.css文件，而不是index.css，后者恰好是我最主要的css文件。但在React中，它将使用我为CSS导入的最新文件。我是React的初学者。所以，如果这没有多大意义，请原谅我。提前感谢！这是我的代码

import ReactDOM from 'react-dom';
import './index.css';
{/*import './dark.css*/}
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Answer 1

是的，有办法。您可以使用React.Lazy和React.Suspense。

例如，本文解释了如何使用它们。

Answer 2

每次导入dark.css没有错，但它的样式应该有条件地应用。我的意思是，暗模式的所有样式都应该封装在像.dark-mode这样的CSS类中。然后，当用户打开暗模式时，您可以将此类应用于body标签或顶层React组件，并在暗模式关闭时将其移除。

这将是一个更容易的解决方案，尝试使用懒惰加载。

Answer 3

对于任何查看此内容的人，我强烈建议使用useContext。它可以很容易地将你的主题传递给你的所有孩子，而不需要使用道具。他们甚至有一个实现你想要的黑暗/光明主题的例子：https://beta.reactjs.org/reference/react/useContext#usage