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

Posted 2023-02-19

【中文标题】向故事书中的 html 类添加控件

【英文标题】：Adding controls to html classes in storybook

【发布时间】：2021-11-21 05:49:11

【问题描述】：

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

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

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

【参考方案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 并使用故事书控件对其进行更改。