Storybook 渲染模式插件

这个插件增加了模拟用户 CSS 渲染偏好（例如 prefers-reduced-motion 及其他）的功能。此插件支持 Storybook v8+。

最初是从 storybook-addon-css-user-prefs 分支出来以支持 sb@^8.0.0，它也是 @jeysal/storybook-addon-css-user-preferences 的替代品。

支持的模式列表

• prefers-color-scheme
• prefers-contrast
• prefers-reduced-data
• prefers-reduced-motion
• prefers-reduced-transparency
• print (待办)
• noscript (待办)

安装

1. 包安装 pnpm add -D storybook-addon-render-modes

2. 插件注册

const config: StorybookConfig = {
  // ...yourOtherSettings
  addons: [
    'storybook-addon-render-modes',
  ],
};

export default config;

注意事项

这个插件不能强制改变浏览器级别的渲染模式（这似乎不可能）。相反，它使用了一种巧妙的方法：通过 JS 遍历 document.styleSheets 并手动重写媒体样式规则。

在某些情况下，这种方法可能不会按预期工作。请随时为此类情况创建 Issue。