如何移除Storybook Canvas默认样式？解决样式覆盖问题

我之前也被Storybook的默认全局样式坑过，特别是那种来自page.css的元素样式，确实会和组件本身的样式冲突。这里有几个实用的解决方案，按推荐程度排序：

1. 用高特异性选择器重置样式（最简便） #

在.storybook/preview-head.html里，针对Storybook画布的容器来写样式，利用父元素选择器提升特异性，比如：

<style>
  /* 目标Storybook的主内容容器 */
  .sb-show-main h2 {
    /* 先完全重置默认样式 */
    all: unset;
    /* 再应用你需要的自定义样式 */
    font-size: 24px;
    font-weight: 600;
    margin: 16px 0;
  }
</style>

.sb-show-main是Storybook画布的核心容器类，加上它之后，你的选择器特异性会比默认的h2更高，就能覆盖掉默认样式了。

2. 运行时移除Storybook的默认样式文件（彻底清除） #

如果不想保留任何Storybook默认全局样式，可以在.storybook/preview.js里添加一段代码，在Storybook加载完成后移除默认样式标签：

// .storybook/preview.js
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

// 移除默认的page.css和其他Storybook全局样式
window.addEventListener('load', () => {
  const storybookStyleTags = document.querySelectorAll(
    'link[href*="page.css"], style[data-sb]'
  );
  storybookStyleTags.forEach(tag => tag.remove());
});

这个方法比较彻底，但要注意如果后续Storybook更新了样式标签的标识，可能需要调整选择器。

3. 自定义Storybook的预览模板（更灵活） #

你可以在.storybook/main.js里配置previewHead，直接替换或修改预览页面的头部内容，完全掌控全局样式：

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  previewHead: (existingHead) => `
    ${existingHead}
    <style>
      /* 全局重置所有默认样式 */
      .sb-show-main * {
        all: unset;
        box-sizing: border-box;
      }
      /* 然后重新定义基础元素样式 */
      .sb-show-main h2 {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 1rem;
      }
    </style>
  `,
};

用all: unset可以一键重置所有元素的默认样式，再根据需要重新定义，避免样式冲突。

4. 样式隔离方案（从根源避免冲突） #

如果你的组件项目本身用了CSS Modules或者Shadow DOM，可以直接利用这些特性隔离样式：

• CSS Modules：组件样式只会作用于当前组件，不会受到全局样式影响；
• Shadow DOM：将组件包裹在Shadow DOM中，外部的全局样式（包括Storybook的）无法渗透进去。

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