如何在故事书 iframe 上设置 CSS 样式

Posted 2023-02-19

【中文标题】如何在故事书 iframe 上设置 CSS 样式

【英文标题】：How to set css styles on storybook iframes

【发布时间】：2021-03-18 23:48:09

【问题描述】：

我希望在故事书画布和文档上设置全局样式。谁能给我一个出路？

谢谢！

【问题讨论】：

您是否尝试过storybook.js.org/docs/react/configure/… 自定义iframe 或storybook.js.org/docs/react/configure/theming#global-theming 全局定义主题？

【参考方案1】：

您可以为此使用preview-header.html。只需将该文件添加到您的.storybook 文件夹即可。然后在那里添加一个样式标签，例如：

<style>
   body 
     font-size: 15px;
   
</style>

它的所有内容都被注入到 Storybook 预览 Iframe 中，因此您可以添加样式以及其他脚本和内容。

【参考方案2】：

https://storybook.js.org/docs/react/configure/theming#global-theming

在.storybook 目录中创建manager-head.html 文件并在其中设置样式

<style>
...
</style>