Passing css module as prop using babel-plugin-react-css-modules

Question

I'm using babel-plugin-react-css-modules and need to pass classes via props to React components, as such:

import "./style.css"

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

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

Inside CustomComponent, I take the prop and apply it where needed.

When it's not passed to styleName directly, the class name is not hashed. Is there a way I can achieve this with this plug-in, i.e. get the hashed class name and pass it as a prop?

Steve Bunting · Accepted Answer · 2021-08-31 07:44:42Z

0

I found a solution to this. By passing in the attributeNames option when configuring the plugin, I could specify the names of props that I want to be transformed, and what I want them to be transformed to.

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

answered Aug 31, 2021 at 7:44

Steve Bunting

4496 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing css module as prop using babel-plugin-react-css-modules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related