使用babel-plugin-react-css-modules如何将哈希类名以props传递给组件

有两种常用的实现方式，按需选择即可： #

方案1：手动取哈希类名传递 #

直接导入样式映射对象，手动取对应哈希值传递给props，灵活度最高，不会影响其他组件逻辑：

1. 修改样式导入语法，拿到转换后的类名映射对象
2. 直接取对应类名的哈希值作为prop传入

// 导入时接收样式映射对象
import styles from "./style.css"

// 原有styleName写法保持不变，正常生效
<div styleName="a" />

// styles.b 就是和styleName="b"完全一致的哈希类名字符串
<CustomComponent styleNameOverride={styles.b} />

方案2：配置插件识别自定义属性 #

如果希望保持直接传字符串的写法，可以修改babel配置，让插件识别你自定义的类名prop：
在babel配置的babel-plugin-react-css-modules参数中添加attributeNames配置项，把你需要插件处理的prop名加入列表：

{
  "plugins": [
    [
      "babel-plugin-react-css-modules",
      {
        // 插件默认只处理styleName属性，把自定义prop也加入列表
        "attributeNames": ["styleName", "styleNameOverride"]
      }
    ]
  ]
}

配置生效后，你原来的写法<CustomComponent styleNameOverride="b" />就可以自动被插件转换，传入的就是哈希后的类名。

注意：该配置是全局生效的，所有组件的styleNameOverride属性都会被插件处理为哈希类名，如果有同名prop不需要转换的场景，优先选方案1。

内容的提问来源于stack exchange，提问作者Steve Bunting