storybook [Bug]: 在主题中使用CSS变量时,"显示代码"会抛出错误,

pobjuy32  于 3个月前  发布在  其他
关注(0)|答案(2)|浏览(71)

描述bug

在使用文档容器主题中的CSS变量时,一切正常,直到点击“显示代码”并抛出错误,页面变为空白。

复现链接

https://stackblitz.com/edit/github-lyvshn-myigje?file=.storybook%2Fpreview.tsx

复现步骤

  1. 转到一个故事
  2. 观察橙色背景颜色
  3. 在故事上点击“显示代码”,检查控制台

系统

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

附加上下文

  • 无响应*
7cjasjjr

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

此响应为您提供了研究的起点,而不是精确的解决方案。
帮助我们改进!如果这有帮助,请留下一个👍,如果它无关紧要,请留下一个👎。

avwztpqn

avwztpqn2#

更奇怪的是,这个错误只发生在基于暗色主题的情况下。将...themes.dark的第13行设置为亮色主题不会引发这个问题。

相关问题