Storybook: Storybook 6 wrong style order with material ui

Created on 11 Aug 2020  路  3Comments  路  Source: storybookjs/storybook

Describe the bug
After upgrading to storybook 6 from version 5.3 material (v4.11.0) styles are overwritten by default ones. This is not consistent some components work fine. I am using create react app with typescript.

Screenshots
image

Code snippets
main.js

module.exports = {
  stories:['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-viewport/register',
    '@storybook/addon-storysource'
  ]
}

preview.js

import { addDecorator, addParameters } from '@storybook/react'
import { muiTheme } from 'storybook-addon-material-ui'
import { themes } from '@storybook/theming'
import { theme } from '../src/static/theme'

addDecorator(muiTheme([theme]))
addParameters({
  backgrounds: [
    { name: 'dark', value: '#202020', default: true },
    { name: 'light', value: '#FFFFFF' }
  ],
  options: { theme: themes.dark }
})

I found some issues with exact problem but fix does not work https://github.com/mui-org/material-ui/issues/14348

Edit: After change on hot reload styles works in correct order.

compatibility with other tools has workaround inactive question / support

All 3 comments

So i fixed that by adding :

addDecorator(storyFn => (
  <StylesProvider injectFirst>
      { storyFn() }
  </StylesProvider>
))

Instead of

export const withStylesDecorator = storyFn => (
  <StylesProvider injectFirst>{storyFn()}</StylesProvider>
)

and

addDecorator(withStylesDecorator)

No idea why it works.

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dnlsandiego picture dnlsandiego  路  3Comments

tirli picture tirli  路  3Comments

rpersaud picture rpersaud  路  3Comments

shilman picture shilman  路  3Comments

tomitrescak picture tomitrescak  路  3Comments