如何引入全局样式，使reset.scss不影响Storybook自身样式

问题场景 #

项目依赖reset.scss全局重置样式，在主项目中正常生效。为了让组件在Storybook中呈现真实效果，我在.storybook/preview.ts中引入了全局样式，却发现reset.scss同时破坏了Storybook自身的界面样式（比如侧边栏、工具栏布局错乱）。需要让重置样式仅作用于展示的组件，不影响Storybook原生UI。

未引入全局样式时的正常Storybook界面：

引入全局样式后的异常界面：

可行解决方案 #

1. 用preview-head.html限定样式作用域

在.storybook目录下新建preview-head.html，将重置样式的作用范围锁定在Storybook的组件渲染根容器（默认选择器为#storybook-root）内：

<style>
  #storybook-root {
    @import '../src/styles/reset.scss';
  }
</style>

这样所有重置规则只会对#storybook-root内部的组件生效，不会干扰Storybook的侧边栏、工具栏等原生UI。

2. 修改reset.scss的作用范围

如果项目中所有组件都有统一的根类名（比如.app-component），直接修改reset.scss，将所有重置规则嵌套在该类名下：

.app-component {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 原reset.scss的所有其他重置规则 */
}

然后在Storybook的预览配置中，通过装饰器给所有组件统一添加这个包裹类：

// .storybook/preview.ts
export const decorators = [
  (Story) => ({
    template: `<div class="app-component"><Story /></div>`,
  }),
];

这种方式既保证组件样式和主项目完全一致，又不会污染Storybook的全局样式环境。

3. 用装饰器包裹组件并限定样式（框架通用）

不管用什么前端框架，都可以通过Storybook的装饰器给每个组件添加专属容器，再让重置样式仅作用于该容器：

// .storybook/preview.ts
export const decorators = [
  (Story) => {
    return `<div class="story-component-wrapper">${Story()}</div>`;
  },
];

然后修改reset.scss，将所有规则改为：

.story-component-wrapper {
  /* 原reset.scss的所有重置规则 */
}

避坑提示 #

• 不要直接在preview.ts中全局引入reset.scss，这会导致样式污染整个Storybook环境
• 优先选择方法1或方法2，实现成本更低，后续维护更简单

内容的提问来源于stack exchange，提问作者UKRman