如何动态更改导入的 css 文件答案

【问题标题】：How can I dynmically change the imported css file如何动态更改导入的 css 文件
【发布时间】：2021-07-03 20:27:34
【问题描述】：

所以我正在做这个项目，我正在使用下一个 js (react) 和一个非常有用的 css 包，它有两个主题暗模式和亮模式。但它们都在单独的 css 文件中，这意味着如果我想使用灯光模式，我必须以这种方式导入它：

import '-packagename/light-something.css'

对于深色模式：

import '-packagename/dark-something.css'

我的问题是，是否有可能让某个按钮事件从暗模式动态更改为亮模式，例如主题按钮。

【问题讨论】：

我觉得很容易做到themes using css variables。但它可能对您没有帮助，因为您正在使用主题包。

标签： javascript css reactjs user-interface web-development-server

【解决方案1】：

以下是根据您的情况进行条件渲染的方法

if (condition) {
    import('lightcss')
   //incase of any module you could use it in then block
   //it's irrelevant  in ur case
    .then(('Menu') => {
        Menu.open();
    })
    .catch(error => {
     import("darkcss")
}) ;
}

【讨论】：

【解决方案2】：

我做了你想要的：

'./myImports.js':

const myImport = (option) => {

        switch (option) {
                case 'a': return require('./myCSSFile.css');
                case 'b': return require('./othercss.css');
                default: return require('./myCSSFile.css');
        }
}

export default myImport;

'./mycomponent1.js':

import myImport from './myImports';

myImport('a');

【讨论】：