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

【问题标题】：Convert imported CSS module class for style attribute将导入的 CSS 模块类转换为样式属性
【发布时间】：2021-07-21 17:09:35
【问题描述】：

我想从 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 对象本身，而不仅仅是名称。

【问题讨论】：

【解决方案1】：

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

<Card className={styles.darkmode} />

【讨论】：

但是由于 CSS 的特殊性，我想将该样式分配给style，而不是className。
我认为 CSS 模块的全部意义在于具有范围的 CSS，这样您就不必覆盖任何东西。如果你想覆盖某些东西，为什么不在组件中创建一个样式对象呢？为什么要使用 CSS 模块？
liefery-it-legacy.github.io/blog/2018/06/27/…