storybookjs/storybook

[Bug] Selected Theme is not applied to docs page when using `inline:false`

开放

#23,809 创建于 2023年8月11日

 (1 条评论) (0 个反应) (0 位负责人)TypeScript (10,058 个派生)batch import
block: sourcebughelp wantedsev:S3

仓库指标

星标
 (89,909 个星标)
PR 合并指标
 (平均合并 7天 22小时) (30 天内合并 184 个 PR)

描述

Describe the bug

The correct class name is not applied in the docs page when using inline:false to have an iframe per block.

Steps to reproduce the behavior

I setup the decorator as follow:

export const decorators = [
  withThemeByClassName({
    themes: {
      light: 'light',
      dark: 'dark',
    },
    defaultTheme: 'light',
    parentSelector: 'body',
  }),
];

Then I create a story with the docs parameter setting inline to false:

parameters: {
    docs: {
      story: { inline: false }, // render the story in an iframe
    },
 },

Expected behavior

The body element on the docs page has the dark css class, when the dark theme is selected. The body element has the light css class, when the light theme is selected. At the moment always the defaultTheme class is applied.

Or in other words: In html one sees the doc iframe with passed style, iframe.html?globals=theme:dark&viewMode=docs&id=starratingcomponent--docs but this style is then not further passed to the story. iframe.html?viewMode=story&id=starratingcomponent--zero-rating-no-rating-text

Environment

  • Storybook 7.2.2
  • @storybook/addon-styling 1.3.6

贡献者指南