如何为指定Storybook故事选择性修改storybook-root宽度？

以下几种方法可实现仅针对单个故事调整渲染宽度，无需修改组件本身或全局样式：

方法1：用Decorator包裹故事（推荐） #

给目标故事添加自定义装饰器，用固定宽度的容器包裹组件——由于你的组件宽度设为100%，会自动继承容器宽度，无需改动storybook-root：

// 你的故事文件
import YourComponent from './YourComponent';

export default {
  title: 'Components/YourComponent',
  component: YourComponent,
};

// 默认故事
export const Default = () => <YourComponent />;

// 需要调整宽度的故事
export const FixedWidth = () => <YourComponent />;
FixedWidth.decorators = [
  (Story) => (
    <div style={{ width: '500px', margin: '0 auto' }}>
      <Story />
    </div>
  ),
];

这样FixedWidth故事的组件会被限制在500px宽度内，其他故事不受影响。

方法2：动态修改storybook-root样式（特殊场景适用） #

如果必须修改storybook-root的宽度，可通过装饰器在故事渲染时动态调整样式，卸载时恢复：

import { useEffect } from 'react';
import YourComponent from './YourComponent';

export const FixedWidthRoot = () => <YourComponent />;
FixedWidthRoot.decorators = [
  (Story) => {
    useEffect(() => {
      const root = document.getElementById('storybook-root');
      if (root) {
        root.style.width = '500px';
        root.style.margin = '0 auto';
      }
      // 组件卸载时恢复原有样式
      return () => {
        if (root) {
          root.style.width = '';
          root.style.margin = '';
        }
      };
    }, []);

    return <Story />;
  },
];

注：如果使用Vue等其他框架，替换对应生命周期钩子即可。

方法3：通过Storybook参数配置样式 #

部分Storybook版本支持通过parameters.styles添加故事专属样式：

export const FixedWidth = () => <YourComponent />;
FixedWidth.parameters = {
  styles: {
    '#storybook-root': {
      width: '500px',
      margin: '0 auto',
    },
  },
};

注：该特性支持度因Storybook版本而异，建议先测试当前版本兼容性。

内容的提问来源于stack exchange，提问作者Mix Master Mike