React with Storybook concatenate string not converted to localIdentName

user_2217167 0
Viewed 151

I am using React with Storybook for component document purpose. I have created a simple Button component. I need to concatenate a string with props. Below is the line what I'm doing.

let paletteClass = isStroke ? `${`${style[palette]}Stroke`}` : `${style[palette]}`;

Storybook converted CSS classes to some random letters (localIdentName). I'm not sure where can I control it. But, When I console.log the above line it returns this,

_2h6gtgy1gP7aGpUo9k2c4dStroke

You can see a plain Stroke string at the end of word. Because of this CSS not worked properly (Undefined). How can I solve this issue?

react-props storybook reactjs concatenation
1 Answers

I see two possible solutions there:

  • to have all possible combinations in your button.module.css - Primary, Warning, Danger, PrimaryStroke, WarningStroke, DangerStroke; in that case you'll be able to use it this way `${style[palette + 'Stroke']}`
  • another options is to use global class names so they can't be affected by webpack
:global(.Primary) {
 // your rules
}
user_115799190
Related