如何在Storybook中让特定故事忽略全局Decorator或覆盖它

根据Storybook装饰器文档，Decorator默认是叠加继承的（全局→组件→故事），而非覆盖。要让某个组件的特定故事不使用全局Decorator，有两种常用方案：

方案一：通过参数标记跳过全局Decorator（保留组件级Decorator） #

在全局Decorator中添加判断逻辑，当故事带有指定参数时，跳过全局装饰器的渲染：

修改 .storybook/preview.js #

/** @type { import('@storybook/react').Preview } */
const preview = {
  decorators: [
    (Story, options) => {
      // 检测故事参数，标记跳过则直接渲染组件
      if (options.parameters.skipGlobalDecorator) {
        return <Story />;
      }
      return (
        <div
          style={{
            padding: '100px',
            backgroundColor: 'red',
          }}
        >
          <Story />
        </div>
      );
    },
  ],
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

修改目标故事（Page.stories.js） #

给需要跳过全局Decorator的故事添加标记参数：

export const LoggedOut = {
  decorators: [
    (Story) => (
      <div
        style={{
          padding: '25px',
          backgroundColor: 'blue',
        }}
      >
        <Story />
      </div>
    ),
  ],
  parameters: {
    skipGlobalDecorator: true,
  },
};

方案二：完全禁用Decorator继承（仅保留当前故事的Decorator） #

如果需要让故事完全不继承全局和组件级的Decorator，只使用自身定义的装饰器，可以设置inheritDecorators: false：

export const LoggedOut = {
  decorators: [
    (Story) => (
      <div
        style={{
          padding: '25px',
          backgroundColor: 'blue',
        }}
      >
        <Story />
      </div>
    ),
  ],
  parameters: {
    inheritDecorators: false,
  },
};

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