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;

注意事项

此附加组件不会强制在浏览器级别更改渲染模式（似乎不可能）。但它使用了一种 hacky 的方法：我们通过 JS 遍历document.styleSheets并手动重写媒体样式规则。

这种方法可能在某些情况下无法按预期工作。对于这些情况，请随时创建一个问题。