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

【问题标题】：Passing css module as prop using babel-plugin-react-css-modules使用 babel-plugin-react-css-modules 将 css 模块作为 prop 传递
【发布时间】：2021-10-26 09:11:17
【问题描述】：

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

import "./style.css"

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

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

在CustomComponent 中，我将道具应用到需要的地方。

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

【问题讨论】：

标签： reactjs typescript babel-plugin-react-css-modules

【解决方案1】：

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

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

【讨论】：