React with Storybook concatenate string not converted to localIdentName

Question

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?

Answer 1

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
}