向故事书中的 html 类添加控件答案

【问题标题】：Adding controls to html classes in storybook向故事书中的 html 类添加控件
【发布时间】：2021-11-21 05:49:11
【问题描述】：

我正在开发一个 tailwind + 故事书组件库，其中主题颜色会根据赋予 html 元素的类而变化。

由于组件在不同的主题中会有不同的颜色，所以在每个故事中都有一个主题切换控件会很棒。

为了实现这一点，我想知道是否有一种方法可以使用控件向每个故事预览的 html 添加和删除一个类？

【问题讨论】：

标签： javascript reactjs user-interface storybook

【解决方案1】：

为了在 React 上获得条件类，您可以使用为组件的 className 属性构建字符串，如下所示：

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

虽然建议使用classNames 实用程序来简化此过程，如下所示：

render () {
    var btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }

您可以在React docs 或classNames docs 中了解更多信息。

【讨论】：

谢谢你的回答，安东尼奥。我想知道如何访问故事书预览 iframe 中的 html 并使用故事书控件对其进行更改。