描述bug
在使用文档容器主题中的CSS变量时,一切正常,直到点击“显示代码”并抛出错误,页面变为空白。
复现链接
https://stackblitz.com/edit/github-lyvshn-myigje?file=.storybook%2Fpreview.tsx
复现步骤
- 转到一个故事
- 观察橙色背景颜色
- 在故事上点击“显示代码”,检查控制台
系统
Storybook Environment Info:
System:
OS: Linux 5.0 undefined
CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm <----- active
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
@storybook/addon-essentials: ^8.3.0-alpha.3 => 8.3.0-alpha.3
@storybook/addon-interactions: ^8.3.0-alpha.3 => 8.3.0-alpha.3
@storybook/addon-links: ^8.3.0-alpha.3 => 8.3.0-alpha.3
@storybook/addon-onboarding: ^8.3.0-alpha.3 => 8.3.0-alpha.3
@storybook/blocks: ^8.3.0-alpha.3 => 8.3.0-alpha.3
@storybook/react: ^8.3.0-alpha.3 => 8.3.0-alpha.3
@storybook/react-vite: ^8.3.0-alpha.3 => 8.3.0-alpha.3
@storybook/test: ^8.3.0-alpha.3 => 8.3.0-alpha.3
storybook: ^8.3.0-alpha.3 => 8.3.0-alpha.3
附加上下文
- 无响应*
2条答案
按热度按时间7cjasjjr1#
免责声明
由于信息是自动生成的,可能存在不准确的情况。
要解决在点击“显示代码”时主题中的CSS变量抛出错误的问题,请确保传递给Storybook的主题对象中不包含任何直接的CSS变量。相反,在将它们传递给主题之前,应将CSS变量解析为实际值。请在
.storybook/YourTheme.js
中更新您的主题配置以使用静态值或以编程方式解析CSS变量。参考资料
/.github/DISCUSSION_TEMPLATE/help.yml
/.github/comments/invalid-link.md
/.github/DISCUSSION_TEMPLATE/ideas.yml
/code/core/src/server-errors.ts
/code/core/src/manager/components/notifications/NotificationItem.tsx
/docs/_snippets/configure-mock-provider-with-story-parameter.md
/code/core/src/preview-errors.ts
/.github/DISCUSSION_TEMPLATE/rfc.yml
/.github/comments
/code/addons/docs/template/stories/docspage
/code/core/src/manager/components/sidebar/Brand.tsx
/code/core/src/core-server/utils/mockdata/errors/NoMeta.stories.ts
/docs/_snippets/storybook-canvas-doc-block-story.md
/code/core/scripts/helpers/modifyThemeTypes.ts
/code/core/src/theming/convert.ts
/docs/configure/user-interface/theming.mdx
/docs/_snippets/your-theme.md
/test-storybooks/server-kitchen-sink/stories/html_content/styles.stories.json
/code/renderers/server/template/cli/button.stories.json
/code/core/src/theming/themes/light.ts
/code/addons/interactions/src/components/InteractionsPanel.tsx
/docs/_snippets/storybook-preview-extended-theme-variables.md
/code/addons/themes/package.json
/code/core/src/preview-api/Errors.stories.tsx
/code/core/src/components/components/Modal/Modal.styled.tsx
关于Greptile
此响应为您提供了研究的起点,而不是精确的解决方案。
帮助我们改进!如果这有帮助,请留下一个👍,如果它无关紧要,请留下一个👎。
avwztpqn2#
更奇怪的是,这个错误只发生在基于暗色主题的情况下。将
...themes.dark
的第13行设置为亮色主题不会引发这个问题。