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

Question

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

import "./style.css"

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

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

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

当它不直接传递给styleName时，类名不会被散列。有没有办法通过这个插件实现这一点，即获取散列类名并将其作为道具传递？

Answer 1

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

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