storybookjs/storybook
在 GitHub 查看[Bug] Selected Theme is not applied to docs page when using `inline:false`
Open
#23,809 建立於 2023年8月11日
block: sourcebughelp wantedsev:S3
描述
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