React: Dynamic import css

Question

I am new to react. I want to import either "darkMode.css" or "lightMode.css" (to a class-based component) based on the value of props.

Imagine I have the below function (in the class based component):

cssName = () => (this.props.mode === "dark"? "darkMode.css":"lightMode.css")

Is there a way to import "darkMode.css" or "lightMode.css" using this function?

Thank you for helping!

Answer 1

cssName = () => {
  if (this.props.mode === 'dark') {
    return import('darkmode.css').then((module) => 
      // whatever you want to do with module
    );
  }

  return import('lightMode.css').then((module) =>
    // whatever you want to do with module
  );
};