如何删除默认的 Storybook Canvas 样式？

Posted 2023-02-19

【中文标题】如何删除默认的 Storybook Canvas 样式？

【英文标题】：How to remove default Storybook Canvas styles?

【发布时间】：2021-03-29 14:30:59

【问题描述】：

Storybook 将默认样式应用于故事画布 iframe。这会阻止我的故事看起来像他们应该的样子。如何摆脱 Storybook 的默认样式？

例如，这是 h2 元素的默认样式（通过 Storybook 的 page.css）：

page.css 的来源是webpack://src/stories/page.css。

如果我在preview-head.html 中添加样式，Storybook 将应用我的自定义样式和默认的 Storybook 样式，默认的 Storybook 样式优先（除非我的自定义样式具有很强的特异性）。

【问题讨论】：

也许会有所帮助specificity.keegan.st（只是增加特异性）

@DaniilLoban 谢谢，但是我必须弄清楚所有默认值是什么并手动重置它们。如果 Storybook 稍后更新更多默认值，我将不得不再次重置它们。 Storybook（一个 UI 预览工具）不允许我们删除它们的默认样式似乎很奇怪。

也许是github.com/storybookjs/storybook/issues/8144？

谢谢@DaniilLoban。感谢您对此进行调查。该github问题与重置浏览器默认值有关。但在浏览器默认设置之上，Storybook 应用了自己的默认设置。我需要删除它，并希望 Storyboard 有一个我可以做到的设置。我已经在使用 material-ui 的 CssBaseline (material-ui.com/components/css-baseline) 来重置浏览器默认设置，但 Storybook 的默认样式覆盖了该重置。

对不起，@Johnny Oshika，没有想法。

【参考方案1】：

默认情况下，当通过npx sb init 为 React 安装 Storybook 时，Storybook 在src/stories 下添加一个 Page.tsx (.js) 文件。在该文件中，他们 import './page.css'; 只需删除该导入即可。

希望这是您的解决方案...根据您使用的框架，它可能会有所不同。

【讨论】：

就是这样！很简单。我很惊讶更多的人没有在寻找这个重置。非常感谢！

虽然这对我有用，但奇怪的是，Storybook 会允许来自另一个模块的 CSS 渗入你不想要这种样式的其他模块。