如何動態更改導入的 css 文件

Question

所以我正在做這個項目，我正在使用下一個 js（反應）和某個 css package 這真的很有幫助，它有兩個主題暗模式和亮模式。 但它們都在單獨的 css 文件中，這意味着如果我想使用燈光模式，我必須以這種方式導入它：

import '-packagename/light-something.css'

對於深色模式：

import '-packagename/dark-something.css'

我的問題是是否有可能讓某個按鈕事件從暗模式動態更改為亮模式，例如主題按鈕。

Answer 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")
}) ;
}

Answer 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');