storybook [插件/视口] 默认视口未应用

nle07wnf  于 6个月前  发布在  其他
关注(0)|答案(6)|浏览(57)

描述问题

#1548 - defaultViewport 未应用相同

重现方法

  • 创建两个故事
  • 为一个故事配置 defaultViewport
  • 有时(很少) defaultViewport 会被应用,但通常不会。
    系统信息
@storybook/addon-essentials: ^6.3.1 => 6.3.1 
    @storybook/addons: ^6.1.21 => 6.3.2 
    @storybook/react: ^6.3.1 => 6.3.1

附加上下文

实际上是“未应用”,与 useAddonState 有关
https://github.com/storybookjs/storybook/blob/next/addons/viewport/src/Tool.tsx#L152-L160

useEffect(() => {
      setState({  
        selected:  //                         <-- called here
          defaultViewport || (viewports[state.selected] ? state.selected : responsiveViewport.id),
        isRotated: state.isRotated,
      });
    }, [defaultViewport]);

    const { selected, isRotated } = state; // <--- not updated here
t30tvxxf

t30tvxxf1#

关于这个有任何更新吗?

afdcj2ne

afdcj2ne2#

在这里也遇到了同样的问题。我尝试在预览文件、故事文件和每个组件中设置defaultViewport,但没有一个加载了带有视口的页面。

uujelgoq

uujelgoq3#

这里有一张票,但它已经关闭了,没有解决方案?

fdx2calv

fdx2calv5#

看起来问题仍然存在于storybook 7中。我无法在预览配置中使defaultViewport正常工作,也无法使其适用于单个组件。

sshcrbum

sshcrbum6#

我意识到了这个问题 - Storybook没有使用视口名称作为标识符。
它使用了对象键的名称。因此,在设置了故事书使用的初始视口标识符后,{ phone: { name: 'my phone', id: 'myPhone' } } 将被选择为 phone

相关问题