将导入的 CSS 模块类转换为样式属性

问题描述

我想从 CSS 模块文件中导入一个样式并将其分配给 style 属性，而不是直接将其编写为内联样式。以下代码：

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

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

给出 The style prop expects a mapping from style properties to values,not a string 错误，因为 styles.darkmode 只是一个名称，而不是一个 JSON 对象。如何将类名转换为有效的 JSON 对象？

我也读过这个 question，但在那种情况下，他得到了 JSON 对象本身，而不仅仅是名称。

解决方法

CSS 模块返回唯一的类名。您应该使用 className，而不是 style：

<Card className={styles.darkmode} />