使用 babel-plugin-react-css-modules 传递 css 模块作为 prop

Question

我正在使用 babel-plugin-react-css-modules 并且需要通过 props 将 classes 传递给 React 组件，例如：

import "./style.css"

// Works
<div styleName="a" />

// Does not work
<CustomComponent styleNameOverride="b" />

在CustomComponent里面，我拿了道具并在需要的地方应用它。

如果不直接传递给 styleName，则不会对 class 名称进行哈希处理。有没有办法用这个插件实现这个，即获取散列的 class 名称并将其作为道具传递？

Answer 1

我找到了解决办法。通过在配置插件时传入 attributeNames 选项，我可以指定我想要转换的道具名称，以及我希望它们转换成什么。

{
  "plugins": [
    ["@dr.pogodin/react-css-modules", {
      attributeNames: {
        altStyleName: "altClassName",
      }
    }]
  ]
}