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

Question

so I am working on this project and I am using next js (react) and a certain css package that is really helpful and it has two themes Dark mode and Light mode. but they are both in separate css files meaning that if I want to use the light mode I have to import it this way:

import '-packagename/light-something.css'

and for Dark mode:

import '-packagename/dark-something.css'

my question here is if there a possibility to have a certain button event to dynamically change from dark to light mode, like a theme button.

Answer 1

Following is way to do conditional rendering as per your case

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

I did something like what you want:

'./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');