如何移除Storybook默认样式？Vue+Buefy项目中关闭Canvas默认字体样式的方法

我之前在Vue+Buefy项目里也碰到过一模一样的问题——Storybook的默认Nunito Sans字体通过元素类强制覆盖了应用里的字体，连Buefy的组件样式都被打乱了。下面是我亲测有效的几种解决方法，按从彻底到针对性的顺序来：

方法一：彻底禁用Storybook的默认样式预设 #

Storybook的默认样式（包括Canvas的字体、重置样式等）是通过官方预设加载的，我们可以直接在配置里关掉它：

1. 打开你的.storybook/main.js（或main.ts）配置文件
2. 修改addons数组，调整包含默认样式的预设，同时添加自定义配置：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    // 调整@storybook/addon-docs配置，禁用默认样式注入
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        sourceLoaderOptions: {
          injectStoryParameters: false, // 关键：关闭默认样式注入
        },
        transcludeMarkdown: true,
      },
    },
    // 保留你需要的其他addons
    '@storybook/addon-actions',
    '@storybook/addon-controls',
  ],
};

方法二：自定义全局样式强制覆盖默认字体 #

如果你不想彻底禁用所有默认样式，只是想解决字体被覆盖的问题，可以在Storybook的预览配置里加载自己的全局样式，把优先级提上去：

1. 在.storybook目录下创建preview.css文件，写入以下内容：

/* 覆盖Storybook Canvas核心容器的字体 */
#root, .sb-show-main, .sb-main-padded {
  font-family: "你的应用字体", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* 确保Buefy组件继承应用字体，避免被覆盖 */
.b-button, .b-card, .b-text, .b-modal-content {
  font-family: inherit !important;
}

2. 打开.storybook/preview.js（或preview.ts），导入这个样式文件并完成Buefy的初始化：

import './preview.css';
import { setup } from '@storybook/vue3'; // Vue2项目用@storybook/vue
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

setup((app) => {
  app.use(Buefy);
});

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

方法三：调整Storybook参数，隔离组件样式 #

还有一种更精细的方法，就是让Storybook的Canvas容器不应用默认样式类，通过修改预览参数实现：

在.storybook/preview.js里添加：

export const parameters = {
  // 关键：设置为fullscreen模式，去掉默认的.sb-main-padded类
  layout: 'fullscreen',
  docs: {
    // 同时关闭文档页的默认字体样式
    container: {
      styles: {
        fontFamily: 'inherit',
      },
    },
  },
};

设置layout: 'fullscreen'会让组件直接占满Canvas，避免默认类带来的字体覆盖问题。

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