使用create-react-library开发React库时CSS Module动态类名不生效如何解决

问题原因 #

你使用CSS Module时类名的取值方式错误：通过import styles from './styles.module.css'导入的styles是一个普通JS对象，对象的键是你在CSS文件中定义的原生类名，值是编译后带哈希后缀的最终类名字符串。你直接把styles对象和type变量用.拼接，会触发对象的默认toString()方法，得到[object Object].primaryButton这类无效类名。

修复方案 #

把类名取值改为对象属性访问写法即可：

import React from 'react'
import styles from './styles.module.css'

export const Button = ({ type, text }) => {
  // 用方括号访问styles对象中对应type的属性值
  return <button className={styles[type]}>{text}</button>
}

如果需要同时拼接多个类名，可按如下方式编写：

// 示例：同时加通用按钮类 + 类型类
<button className={`${styles.baseButton} ${styles[type]}`}>{text}</button>

修改完成后重新打包组件库，再在项目中更新引入的组件库版本，样式即可正常生效。

内容的提问来源于stack exchange，提问作者Mehmet Aziz Algüllü