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(待办)
安装
-
包安装
pnpm add -D storybook-addon-render-modes
-
插件注册
const config: StorybookConfig = {
// ...yourOtherSettings
addons: [
'storybook-addon-render-modes',
],
};
export default config;
注意事项
这个插件不能强制改变浏览器级别的渲染模式(这似乎不可能)。相反,它使用了一种巧妙的方法:通过 JS 遍历 document.styleSheets
并手动重写媒体样式规则。
在某些情况下,这种方法可能不会按预期工作。请随时为此类情况创建 Issue。