-1

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!

Yige Song
  • 333
  • 6
  • 16

1 Answers1

0
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
  );
};
Ross Sheppard
  • 850
  • 1
  • 6
  • 14
  • Thank you for answering! But if props.mode changes, cssName() will be called multiple times, and there will be two css files imported. How do I remove the wrong import? – Yige Song Oct 05 '20 at 10:44