描述bug
我们目前使用 .storybook/preview-body.html 文件来添加一些自定义元素。在画布选项卡上，一切都按预期工作。然而，当切换到使用内联渲染(与iframes相反)的DocsPage时，元素将仅添加到 docs-root 元素一次，而不是每个单独的“故事画布”。
这样一来，当访问自定义元素并将其附加到它时，它们会出现在整个DocsPage的上下文中，而不仅仅是相关的story。
解决方法
使用iframes代替内联渲染，通过在您的 .storybook/preview.js 中配置docs,如下所示：https://storybook.js.org/docs/react/writing-docs/docs-page#inline-stories-vs-iframe-stories
// .storybook/preview.js
export const parameters = {
docs: {
// Opt-out of inline rendering
inlineStories: false,
},
};
2条答案
按热度按时间ef1yzkbh1#
我也在这里遇到了这样的问题。当我设置inlineStories: false时，在Canvas上修改属性没有问题，但在Docs中，修改不起作用。移除inlineStories: false并恢复它，但是写Component需要inlineStories: false
Chrome和Safari的行为一致
节点：14.17.0
这是我安装的版本：
"@storybook/addon-actions": "6.5.9"
"@storybook/addon-essentials": "6.5.9"
"@storybook/addon-links": "6.5.9"
"@storybook/builder-webpack5": "6.5.9"
"@storybook/manager-webpack5": "6.5.9"
"@storybook/addon-docs": "6.5.9"
"@storybook/addon-storysource": "6.5.9"
"@storybook/addon-viewport": "6.5.9"
"storybook-dark-mode": "1.1.0"
"@storybook/addons": "6.5.9"
"@storybook/api": "6.5.9"
"@storybook/source-loader": "6.5.9"
"@storybook/theming": "6.5.9"
"@storybook/vue": "6.5.9"
"@storybook/vue3": "6.5.9"
jslywgbw2#
up