对未转换为 localIdentName 的 Storybook 连接字符串做出反应答案

【问题标题】：React with Storybook concatenate string not converted to localIdentName对未转换为 localIdentName 的 Storybook 连接字符串做出反应
【发布时间】：2021-06-22 14:13:36
【问题描述】：

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

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

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

_2h6gtgy1gP7aGpUo9k2c4dStroke

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

【问题讨论】：

试试这个${style[palette]}Stroke，可能是语法错误。
什么是style？你从哪里得到它？您期望拥有的价值是什么？
@diedu 我已经导入了像 import style from './button.module.css' 这样的 CSS 文件。 palette 包含三个变体。主要、危险和警告。我在 button.module.css 文件中有这三个调色板的特定 CSS。
您能否分享一下 CSS 代码并更清楚地说明您的期望？抱歉，我不明白您要查找的结果是什么。 AFAIK CSS 模块产生某种编译的 CSS 类，所以结果对我来说看起来不错。

标签： reactjs concatenation react-props storybook

【解决方案1】：

我在那里看到了两种可能的解决方案：

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

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

【讨论】：