我正试图在我的项目中添加一个暗模式。如果没有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')
);
是的,有办法。您可以使用React.Lazy
和React.Suspense
。
例如,本文解释了如何使用它们。
每次导入dark.css
没有错,但它的样式应该有条件地应用。我的意思是,暗模式的所有样式都应该封装在像.dark-mode
这样的CSS类中。然后,当用户打开暗模式时,您可以将此类应用于body
标签或顶层React组件,并在暗模式关闭时将其移除。
这将是一个更容易的解决方案,尝试使用懒惰加载。
对于任何查看此内容的人,我强烈建议使用useContext。它可以很容易地将你的主题传递给你的所有孩子,而不需要使用道具。他们甚至有一个实现你想要的黑暗/光明主题的例子:https://beta.reactjs.org/reference/react/useContext#usage