How to set <body> classes? #1672
Comments
|
What are you trying to insert? You should generally be using stories to insert components and add decorators to them if you want the components to be wrapped in something. Extremely hacky workaround: you can target the nodes onload with a script in the header |
|
I have add body tag with class attribute in the manager-head.html but it sets same for all stories while I need for different stories different body class(es). |
|
Write a wrapper component / decorator that sets the classes for you. Alternatively you could write an addon so you can change the class from a panel for example. |
|
@ndelangen How do you set wrapper decorators with angular story books... I'm totally unable to do so. |
|
you can add file config.js to .storybook dir with something likes this: import { configure } from '@storybook/react'
function loadStories () {
document.body.className += ' ' + 'hasHover'
}
configure(loadStories, module) |
|
That will work, mind that config.js CAN be MHR, and so the code may execute multiple times. |
storiesOf('name', module)
.addDecorator(story => {
document.body.classList.add('hasHover');
return story();
})
.add('other name', () => {
// ..
});Something like that might work, as a decorator. Decorators are to change the story before they render, wrap them, extract data etc. For permanent things side effects you're way better off using preview-head.html right now. |
|
Creating a file named preview-head.html in your config directory containing this seems to have worked out for me. <script>setTimeout(function () { document.body.classList.add("yourClass"); }, 0);</script> Check the documentation here : https://storybook.js.org/configurations/add-custom-head-tags/ |
|
Also you can try:
|
Hello!
Is there way to set
<body>(inside<iframe>) class(es)? (except usingfinddomnode)Thank you
The text was updated successfully, but these errors were encountered: