与未转换为 localIdentName 的 Storybook 连接字符串反应

Question

我将 React 与 Storybook 一起用于组件文档目的。我创建了一个简单的 Button 组件。我需要将一个字符串与道具连接起来。下面是我正在做的事情。

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

Storybook 将 CSS 类转换为一些随机字母 (localIdentName)。我不确定在哪里可以控制它。但是，当我 console.log 上面的行时 returns 这个，

_2h6gtgy1gP7aGpUo9k2c4dStroke

您可以在单词末尾看到一个普通的 Stroke 字符串。因此 CSS 无法正常工作（未定义）。我该如何解决这个问题？

Answer 1

我看到了两个可能的解决方案：

在您的 button.module.css 中包含所有可能的组合 - Primary、Warning、Danger、PrimaryStroke、WarningStroke、DangerStroke；在这种情况下，您将能够以这种方式使用它 `${style[palette + 'Stroke']}`
另一种选择是使用全局 class 名称，这样它们就不会受到 webpack

:global(.Primary) {
 // your rules
}

React with Storybook concatenate string not converted to localIdentName