Storybook: Multiple style tags in DOM causing dynamic styles overwritten

Created on 25 Nov 2019 · 2Comments · Source: storybookjs/storybook

Describe the bug
When using Nextjs and it's styled-jsx storybook is rendering the <style> tags below each component in the DOM which causes dynamic styles to be overwritten by what gets rendering in the last <style> tag.

In the following I have 3 buttons, I've selected the first one and you can see its font-size 2.4rem which you can see is in the the 3rd (last) <style> tag. If I set the last button to small then all the buttons would be small as that's what would be in the last <style> tag.

When rendering the same normally there are no <style> tags in the DOM below the component.

To Reproduce
Steps to reproduce the behavior:

Clone repo https://github.com/addstar34/nextjs-storybook
run yarn install
run yarn storybook and you'll see the issue.
run yarn dev and you'll see it working correctly.

The repo was setup by simply running yarn create next-app adding storybook and creating a basic button component.

Expected behavior

The <style> tags should be in the <head> of the document not in the body below each component.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.17.3 - ~/.yarn/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
Browsers:
Chrome: 78.0.3904.108
Firefox: 70.0.1
Safari: 13.0.3
npmPackages:
@storybook/react: ^5.2.6 => 5.2.6

compatibility with other tools question / support

Source

addstar34

👍1

All 2 comments

@addstar34
It seems that the Babel plugin doesn't work properly. Try creating .storybook/.babelrc and configure it following styled-jsx's installation guide