Convert imported CSS module class for style attribute

Question

I want to import a style from CSS module file and assign it to style attribute, instead of writing it directly as inline style. The following code:

import styles from "./Calculator.module.css"

const Calculator = () => {
 return (
   // ...
   <Card style={styles.darkmode} />
   // ...
  );
};

Gives a The style prop expects a mapping from style properties to values, not a string error, because styles.darkmode is just a name, not a JSON object. How could I convert the class name to a valid JSON object?

I've also read this question, but in that case, he got the JSON object itself, not just the name.

Answer 1

CSS modules return unique class names. You should be using className, instead of style:

<Card className={styles.darkmode} />