时间戳

首页 > 解决方案 > 导入css文件以响应事件

reactjs - 导入css文件以响应事件

问题描述

我试图在某些条件下将 css 文件导入到反应组件。如果条件发生变化，它应该更改 css 文件。它正在获取 Lighttheme css 文件并渲染它。在它更改为 Darktheme 文件的事件中。但如果该事件再次发生，它不会转到 LightTheme 文件。这是功能

const LightTheme = React.lazy(() => import('./style1'));
const DarkTheme = React.lazy(() => import('./style2'));

const ThemeSelector = ({ color }) => {
    return (
        <>
            <React.Suspense fallback={<></>}>
                {(color === "DarkTheme") && <LightTheme />}
                {(color === "LightTheme") && <DarkTheme />}
            </React.Suspense>
        </>
    )
}

标签： reactjs

解决方案

我不熟悉动态导入 CSS 文件，但如果您要在基于类的组件中执行此操作，您应该在 componentWillMount() 方法中执行条件检查并使用 require('filename.css')。这可能在 Dev 中有效，但要使其在生产中有效，您可能必须相应地配置 webpack。更好的解决方案是使用单个 CSS 文件。将 .light 和 .dark 类与您的自定义 CSS 类一起使用，并在您的组件中根据您的条件分配类。

className = {color === 'DarkTheme'？('your-custom-class-dark') : ('your-custom-class-light')}

推荐阅读