如何将规范化 CSS 添加到 Storybook?

Posted

技术标签:

【中文标题】如何将规范化 CSS 添加到 Storybook?【英文标题】:How to add Normalize CSS to Storybook? 【发布时间】:2021-09-18 06:21:51 【问题描述】:

我正在尝试从 node_modules 添加Normalize.css,但它不起作用。 我已经尝试了一切,从 webpack 的自定义配置(我的 React 项目使用版本 5),到将其导入 preview.js 和 preview-head.html,但我无法让它工作,Storybook仍然让我使用浏览器样式,这非常令人沮丧,因为在我的 React 项目中我想使用 css normalizer。

谁能给我一个例子来说明它是如何完成的?因为我在文档和互联网上找到的内容对我没有帮助,或者我不知道该怎么做。

谢谢

【问题讨论】:

【参考方案1】:

您可以尝试将style标签放入preview-head.html

像这样:

<style>
  /* copy-paste normalize code hire */
  html 
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
  
  ...
</style>

【讨论】:

以上是关于如何将规范化 CSS 添加到 Storybook?的主要内容,如果未能解决你的问题,请参考以下文章

将@fontface 添加到故事书

带有 CSS 模块和更少的 Storybook UI

在 StoryBook 中为 Button 添加悬停状态

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

如何让 Storybook 使用项目的 CSS 变量

React:如何将 Storybook .stories 放在每个组件的目录中?