Custom theme not propagated within Storybook.js #24282

robphoenix · 2021-01-05T18:54:51Z

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When using Material-UI v5 within Storybook, the sx prop is picking up the default theme rather than the custom theme.

// theme.ts
import { createMuiTheme } from '@material-ui/core';

const palette = {
  primary: {
    main: '#ff69b4',
  },
};

export default createMuiTheme({ palette })

// .storybook/preview.js
import React from 'react'
import {ThemeProvider} from '@material-ui/core'
import {StylesProvider} from "@material-ui/core";


import theme from '../src/theme'

export const decorators = [
  (Story) => (
    <StylesProvider injectFirst>
      <ThemeProvider theme={theme}>
        <Story />
      </ThemeProvider>
    </StylesProvider >
  ),
]

// stories/Thing.stories.tsx
const Template: Story<Props> = () => {
  const theme = useTheme();
  console.log({ theme });
  return (
    <>
      <Thing />
      <Box
        sx={{
          p: 8,
          backgroundColor: 'primary.main',
        }}
      />
    </>
  );
};

The theme logged to the console contains the custom theme colour (#ff69b4)

primary: {main: "#ff69b4", light: "rgb(255, 135, 195)", dark: "rgb(178, 73, 125)", contrastText: "rgba(0, 0, 0, 0.87)"}

However, the background colour of the Box component is #3f51b5 (indigo.500)

Expected Behavior 🤔

Material UI components should pick up the custom theme when used within storybook.

Steps to Reproduce 🕹

Steps:

git clone https://github.com/robphoenix/mui-storybook
cd mui-storybook && yarn install
yarn storybook
View storybook in browser & check console output.

Context 🔦

I'm building a UI component library. Everything is working fine with v5 when I use my custom theme/components within create-react-app, however I now want to develop the components outside of an app and am using storybook to do so. However this is not possible if the custom theme is not picked up. Apologies if I've overlooked something obvious, after a day of debugging I can't see the wood for the trees. 😄

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 11.0.1
  Binaries:
    Node: 15.2.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.10 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.88 <-- used this browser
    Edge: Not Found
    Firefox: 75.0
    Safari: 14.0.1
  npmPackages:
    @emotion/react: ^11.1.2 => 11.1.4
    @emotion/styled: ^11.0.0 => 11.0.0
    @material-ui/core: ^5.0.0-alpha.22 => 5.0.0-alpha.22
    @material-ui/icons: ^4.11.2 => 4.11.2
    @material-ui/styled-engine:  5.0.0-alpha.22
    @material-ui/styles:  5.0.0-alpha.22
    @material-ui/system:  5.0.0-alpha.22
    @material-ui/types:  5.1.4
    @material-ui/unstyled:  5.0.0-alpha.22
    @material-ui/utils:  5.0.0-alpha.22
    @types/react: ^17.0.0 => 17.0.0
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    typescript: ^4.1.3 => 4.1.3

The text was updated successfully, but these errors were encountered:

oliviertassinari · 2021-01-05T19:42:22Z

@robphoenix Thanks for the reproduction. As far as I can play with it, it's an issue with the version of emotion. Storybook uses emotion v10, Material UI v5 uses emotion v11. The context theme provider isn't resolved to the right version.

MUI handles emotion as a peer-dependency and not a direct dependency because of the singletons. We have seen the same problem in the past in: https://github.com/mui-org/material-ui/pull/23007/commits/00b33f9affcc0dd011df03da74fc7846d14aaaaa#r522777191. We had to force the resolution to a specific version.

I can solve the issue in the reproduction with this patch:

diff --git a/package.json b/package.json
index 544c087..bb8d89b 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,9 @@
         "tslib": "^2.0.3",
         "typescript": "^4.1.3"
     },
+    "resolutions": {
+        "**/@emotion/styled": "^11.0.0"
+    },
     "dependencies": {
         "@emotion/react": "^11.1.2",
         "@emotion/styled": "^11.0.0",

Relevant line of codes:

The theme singleton used by MUI:
https://github.com/mui-org/material-ui/blob/1b24a942f93a07a7f2073942c6dec91bdd688d75/packages/material-ui-styled-engine/src/index.js#L2
The styled() method used by MUI:
https://github.com/mui-org/material-ui/blob/1b24a942f93a07a7f2073942c6dec91bdd688d75/packages/material-ui-styled-engine/src/index.js#L1

A couple of ideas for solving this issue properly:

~~The solution proposed in the initial PR's comment could be interesting to push further. cc @Andarist~~ Won't help Storybook forces a specific version.

Maybe @emotion/styled should reexport the ThemeContext.

~~Maybe MUI should make @emotion/styled a direct dependency and get this issue fixed, not a peer one (only have @emotion/core as a peer dependency). cc @mnajdova.~~ Tested, doesn't work
Storybook should better isolate the dependencies it uses with the ones used by developers cc @shilman. Related issues: Storybook 6.1.0-rc.4 & Emotion 11.0 support storybookjs/storybook#13145, @emotion/styled alias in webpack config breaks projects using Emotion 11 storybookjs/storybook#12262, @emotion/react ThemeProvider does not work with @emotion/styled storybookjs/storybook#10231

robphoenix · 2021-01-06T08:31:09Z

That addition to the package.json fixed it for me also, thanks! 🚀 🙏

Thanks for the swift, er..., resolution to this issue @oliviertassinari 😆 🙄 It's very much appreciated.

Andarist · 2021-01-06T09:29:18Z

Well, I haven't checked this exact case but it looks awfully like something that has already been reported to me and which also has been reported already several times to Storybook.

The problem is that they enforce a resolution of @emotion/styled to their local version~ (or rather probably to what is found relative to their packages) with webpack aliases. They still depend on Emotion 10 and thus this is causing a conflict - context can't resolve properly.

They shouldn't apply any aliases like this at all. This just won't work - because even if they upgrade to Emotion 11 and force the imported @emotion/styled package to be resolved to that they will essentially break all existing Emotion 10+Storybook users.

I think you can fix that temporarily on your end by manipulating the Storybook's webpack config - but I'm not sure what exact changes are required. Maybe it's just a matter of removing that alias but that would have to be tested to see if Storybook works OK with such a config.

oliviertassinari · 2021-01-07T16:00:11Z

@Andarist Do you know how Storybook force the resolution of @emotion/styled to v10? I'm asking because I was hopping that Material-UI could have @emotion/styled as a dependency instead of a peer dependency. I might solve the issue. Is there a reason why @emotion/styled need to be a peer dependency?

Andarist · 2021-01-07T16:47:11Z

I think they are having it as regular dep and force all references to @emotion/styled to resolve to a single location in their webpack config (the webpack part im sure about)

I would advise against making it a dep for Material UI because package managers will just often install multiple copies of it and different parts of the module tree will resolve to different locations and thus to different created contexts etc and for things to work correctly you need to have a single Emotion context. Its pretty much the same reason why you need React itself as peer.

oliviertassinari · 2021-01-07T17:11:06Z

you need to have a single Emotion context

I likely miss something. The theme and cache contexts seems to be coming from @emotion/react which we would keep as a peer dependency.

Andarist · 2021-01-07T17:15:09Z

Ah, right - sorr, I've just generalized the problem, not realizing that you only ask about styled. Hm, it should be OK to put it as regular dep. You are still risking several copies being pulled into final bundles but thats just a bundlesize concern.

If I find any other reason for you not doing that I will report back - you might also ping me in the PR introducing that change (if you gonna put one together) for taking a final look at this.

robphoenix · 2021-01-12T12:53:45Z

@oliviertassinari @Andarist The issue isn't totally fixed by adding the resolutions field in the package.json; when adding components to the theme, any styleOverrides are still not picked up. I've updated the example repo with button overrides for the hover colour. The button picks up the theme colours but not the overrides, however these are present in the console output.

Andarist · 2021-01-12T13:15:19Z

Just FYI - I might not be able to take a look at the provided repo in the nearest future so if somebody could pick this up it would be highly appreciated. I would just try to locate from what disk location particular contexts are coming from - it really has to be an issue with multiple instances of @emotion/styled or smth being bundled and causing a mismatch.

oliviertassinari · 2021-01-13T12:51:20Z

The button picks up the theme colours but not the overrides, however these are present in the console output.

@robphoenix This is a different issue, looking at your code, it's very likely fixed by #24253.

robphoenix · 2021-01-13T13:09:31Z

@robphoenix This is a different issue, looking at your code, it's very likely fixed by #24253.

~~ah, ok great, thanks. Do you know when this will be released?~~

fixed with v5.0.0-alpha.23 thanks @oliviertassinari 🙏

eps1lon · 2021-01-21T13:39:09Z

At which point was the repro faulty? I just cloned it and button and box have the same color.

oliviertassinari · 2021-01-21T13:45:06Z

@eps1lon The expected result is pink

the actual result is blue

Which color do you see rendered?

eps1lon · 2021-01-21T13:49:36Z

The expected result is pink, the actual result is blue. Which color do you see rendered?

Both pink. You're not using the latest version.

I guess the resolutions entry was added after the problem was reported. In the future, please don't fix reproductions so that we can reproduce them later on. Or update the reproduction steps.

I remove the resolutions entry from the repro and I don't know why you would expect that the theme.ts is picked up. I guess this is some magic from storybook that uses this theme in their ThemeProvider.

The problem is caused by two issues:

we don't have an isolated theming context but use the one from emotion. I already described that for styled-components but we never attempted to resolve this issue
Storybook is doing some magic with theme.ts
@robphoenix Could you point to some documentation so that we can understand what's happening?

robphoenix · 2021-01-22T08:51:48Z

please don't fix reproductions so that we can reproduce them later on

sorry, I pushed the first fix as I thought the second issue I mentioned was connected.

I don't know why you would expect that the theme.ts is picked up

In .storybook/preview.js

import React from 'react'
import {ThemeProvider} from '@material-ui/core'
import {StylesProvider} from "@material-ui/core";


import theme from '../src/theme'

export const decorators = [
  (Story) => (
    <StylesProvider injectFirst>
      <ThemeProvider theme={theme}>
        <Story />
      </ThemeProvider>
    </StylesProvider >
  ),
]

Could you point to some documentation so that we can understand what's happening?

https://storybook.js.org/docs/react/configure/overview#configure-story-rendering

Pushplaybang · 2021-02-28T16:58:02Z

Also struggling with this. I'm seeing partial updates from the provided theme, such as primary and secondary colors, but typography is not applied.

Also, attempted to use the alpha release mentioned above, and received the following error:

TypeError: Cannot read property 'dark' of undefined at push../node_modules/@material-ui/core/Button/Button.js.Object.styleProps.styleProps

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
}

// .storybook/preview.js
import { CssBaseline } from '@material-ui/core'
import React from 'react'
import { StylesProvider, ThemeProvider } from '@material-ui/core/styles'
import { ThemeProvider as SCThemeProvider } from 'styled-components'

import { useDarkMode } from 'storybook-dark-mode'
import { lightTheme, darkTheme } from '../src/app/theme'

export const decorators = [
  (Story, context) => {
    // FIXME:  no theme control set, use toolbars addon and retrieve state from context.globals once MUI issue resolved
    const isDark = false
    const theme = isDark ?  darkTheme : lightTheme

    return (
      <StylesProvider injectFirst>
        <CssBaseline />
        <ThemeProvider theme={theme}>
          <SCThemeProvider theme={theme}>
            <Story {...context} />
          </SCThemeProvider>
        </ThemeProvider>
      </StylesProvider>
    )
  },
]

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
}

I'm using this in nextJS, with styled-components, though I don't think this has any impact. All rendering with theme switching works perfectly in the app, styled-components work fine in storybook.

oliviertassinari · 2021-02-28T17:29:44Z

@Pushplaybang This issue is specific about emotion. If you are using styled-components you can configure Material-UI to use it too.

Pushplaybang · 2021-02-28T19:31:05Z

Hi @oliviertassinari

not sure if you misunderstood, adding the above in the hopes that it provides additional context. I'm experiencing the eact behaviour described by the OP.

Current Behavior 😯
When using Material-UI v5 within Storybook, the sx prop is picking up the default theme rather than the custom theme.

Further, this issue is specifically about the latest version of MUI and how it's themes don't work in storybook, which seems to be a symptom of some issues regarding how each library is depending on emotion, as per the original post, and all of the subsequent conversation above.

The fact that I'm also using styled-components, has no bearing in this instance, I have styled-components and MUI working perfectly in my app, with or without styled-components, the issue remains:

MUI Custom themes don't currently seem to work in Storybook, for the latest stable release, and any subsequent release candidate.

oliviertassinari · 2021-02-28T19:39:30Z

@Pushplaybang I meant configure Material-UI so you don't bundle emotion and styled-components in your app, only one of the two. We share a workaround in the previous comments.

Pushplaybang · 2021-02-28T21:16:38Z

@oliviertassinari I've read this thread several times now, could you please quote the workaround you're speaking of?

selenehyun · 2022-03-04T02:20:35Z

I was talking with Norbert from Storybook yesterday and I got the info that with the new version of Storybook all of those issues should be gone. They were both using and webpack-aliasing Emotion before but now they just bundle Emotion into their lib - so it shouldn't create conflicts with other instances of Emotion in the app etc

Maybe related to this.
When Storybook 6.5 is released, it seems that the problem will be fixed!

Ox24 · 2022-03-08T15:34:24Z

I was talking with Norbert from Storybook yesterday and I got the info that with the new version of Storybook all of those issues should be gone. They were both using and webpack-aliasing Emotion before but now they just bundle Emotion into their lib - so it shouldn't create conflicts with other instances of Emotion in the app etc

Any ETA for this? Or any alpha we could try and check?
Thx in advance!

Andarist · 2022-03-08T17:11:50Z

I didn't check it but this version might work: v6.5.0-alpha.31

totszwai · 2022-03-09T02:49:38Z

I'm facing this exact issue!!!! The thing is that, the React component itself have no problem getting the theme, but the issue is with the story itself.

There is a "workaround" (is in double quote because it caused other error!) if you render the story as a component (instead of story function, then it would be able to get the properties and get the theme. BUT, rendering the story as a component would ended up causing the following error in some other story!!!!

Storybook preview hooks can only be called inside decorators and story functions

I am using pretty much everything latest:

    "@storybook/addon-actions": "^6.4.19",
    "@storybook/addon-essentials": "^6.4.19",
    "@storybook/addon-links": "^6.4.19",
    "@storybook/addon-storysource": "^6.4.19",
    "@storybook/addons": "^6.4.19",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "6.4.19",
    "storybook": "^6.4.19",
    "storybook-addon-designs": "6.2.1",
    "storybook-react-i18next": "1.0.17",

Decorator in the preview.js

addDecorator((story, context) => {
  const theme = DefaultTheme[context.globals.theme];
  return (
    <MyThemeProvider theme={theme}>
      <I18NextProvider i18n={i18n}>
        {story()}
      </I18NextProvider>
    </MyThemeProvider>
  );
});

Where MyThemeProvider just wraps both Mui's and StyledComponent's provider like so

import { ThemeProvider as MuiThemeProvider, CssBaseline, StyledEngineProvider } from '@mui/material';
import { ThemeProvider } from 'styled-components';
...
    <StyledEngineProvider injectFirst>
      <MuiThemeProvider theme={props.theme}>
        <ThemeProvider theme={props.theme}>
          <GlobalStyle />
          <CssBaseline />
          {props.children}
        </ThemeProvider>
      </MuiThemeProvider>
    </StyledEngineProvider>

Then in any story, I just try to grab the theme object and it simply returned undefined

export const SomeStory = (props: SomeProps) => {
  const theme = useTheme();
  console.log(theme);
  ...

In addition, there is an "interesting" weird hack that could workaround the problem... is to add a decorator right before the story itself. And no, you cannot add the hack with addDecorator in preview.js, that won't work, the only way is to add it inside the storybook file...

export default {
  title: 'Blah',
  component: Blah,
  decorators: [
    (Story) => (<Story />) // insert MIND=BLOWN meme
  ]
} as ComponentMeta<typeof Blah>;

With that, the story would get the theme object... go figure?

I'm opening a bug over at storybook as well. storybookjs/storybook#17668

Now using alpha storybook for emotion 11 support, which is required for MUI See mui/material-ui#24282 and storybookjs/storybook#17000

marvinguors · 2022-03-11T19:13:32Z

// .storybook/preview.js

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { ThemeProvider as Emotion10ThemeProvider } from 'emotion-theming';

const defaultTheme = createTheme(); // or your custom theme

const withThemeProvider = (Story, context) => {
  return (
    <Emotion10ThemeProvider theme={defaultTheme}>
      <ThemeProvider theme={defaultTheme}>
        <Story {...context} />
      </ThemeProvider>
    </Emotion10ThemeProvider>
  );
};

export const decorators = [withThemeProvider];

Wrapping with Emotion 10 theming provider works for me.

Now using alpha storybook for emotion 11 support, which is required for MUI See mui/material-ui#24282 and storybookjs/storybook#17000

Jaypov · 2022-03-23T17:40:59Z

// .storybook/preview.js

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { ThemeProvider as Emotion10ThemeProvider } from 'emotion-theming';

const defaultTheme = createTheme(); // or your custom theme

const withThemeProvider = (Story, context) => {
  return (
    <Emotion10ThemeProvider theme={defaultTheme}>
      <ThemeProvider theme={defaultTheme}>
        <Story {...context} />
      </ThemeProvider>
    </Emotion10ThemeProvider>
  );
};

export const decorators = [withThemeProvider];

Wrapping with Emotion 10 theming provider works for me.

If i could kiss you i would. Iv been trying to figure this out for over an hour and literally nothing helps. Not even the storybook MUI plugin (guessing it was abandoned from looking at the Git). you life saver.

Now using alpha storybook for emotion 11 support, which is required for MUI See mui/material-ui#24282 and storybookjs/storybook#17000

I have now fixed the theme not being applied by adding the resolutions for emotion. I got this solution from mui/material-ui#24282 It isn[t a fix though, more a temporary resolution, we should keep an eye on this issue, see what happens or if there is a better option than what I've done here.

joanrodriguez · 2022-04-03T10:42:29Z

This solutions fixed it for me thx to #24282 (comment):
module.exports = {
  features: { emotionAlias: false },
}

This works but you need to be on v 6.4!

iceniveth · 2022-04-28T05:35:51Z

This solutions fixed it for me thx to #24282 (comment):
module.exports = {
  features: { emotionAlias: false },
}
This works but you need to be on v 6.4!

It seems to work only on canvas tab but doesn't on docs tab

susilthapa · 2022-05-19T05:33:47Z

I had similar issue with Mui version 5 and storybook version 6.3.12 but worked fine after doing just
npx sb@next upgrade --prerelease

AlexanderKositsyn · 2022-09-09T21:22:03Z

I was on 6.4 version and had same issue. Update to 6.5 solved this bug

jmbeach · 2022-12-06T19:54:44Z

I'm using @mui/styled-engine-sc and forgot to add the alias to storybook webpack as described here

.storybook/main.js

webpackFinal: async config => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        '@mui/styled-engine': '@mui/styled-engine-sc',
      },
    },
  };
},

oliviertassinari · 2023-02-06T20:07:22Z

The problem might be solved in Storybook v7.0.beta.0 per storybookjs/storybook#12262 (comment).

maciej-gurban · 2023-03-09T20:40:30Z

Trying on a fresh setup with storybook 6.5.16 and none of the solutions worked. Tried features: { emotionAlias: false }, and wrapping story decorator with emotion theme provider. No theme overrides will be used, even if I create a new theme inline in the preview.ts file (where the story wrapper is meant to be created)

The thing that does work, is adding the standard MUI ThemeProvider to a particular story - there it works without the needed of additional theme provider. Was testing overrides for a button - background, box shadow etc. Unless some other solution comes around, i suppose I'll need to wrap every story with my own component which provides the theme.

Tried using v7 but it seems too buggy when trying to set it up using Yarn PnP setup. Recreated it from scratch 3 different ways and never got storybook to compile at all. More complicated when doing so in a monorepo

maciej-gurban · 2023-03-25T22:43:35Z

I ended up trying to define a story wrapper within the same package as my components and import it into Storybook's preview.ts, and that seems to solve the issue, and doesn't require double-wrapping the theme. Here's what I'm using:

Storybook's preview.tsx

import StoryWrapper from '@monorepo/components/story-theme-wrapper';
import type { Story } from '@storybook/react';

function Theme(Story: Story) {
  return (
    <StoryWrapper>
      <Story />
    </StoryWrapper>
  );
}

export const decorators = [Theme];

The StoryWrapper

import React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';
import theme from '@monorepo/components/theme';

const StoryWrapper = ({ children }) => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {children}
  </ThemeProvider>
);

export default StoryWrapper;

I then removed emotionAlias: false from main.tsx and theme continues working as expected.

My monorepo structure boils down to:

packages/
  components/
    story-theme-wrapper.tsx
    theme/
    my-component/
      my-component.tsx
      my-component.story.tsx
  storybook/
    config/
      preview.tsx
      main.tsx

Edit: The nice thing about this approach is that I no longer need to declare mui, emotion and all other dependencies used in components in both packages. In a monorepo setup, to avoid it I'd need to either shared dependencies to root package.json so that they can be imported across all packages (especially important with yarn v3 and pnp which doesn't seem to allow it by default), or I'd need to create another directory level with package.json containing dependencies to be shared across N number of packages (but not to be shared by all packages). My storybook package.json now only contains storybook-related dependencies and nothing more.

Wire1lovet · 2023-03-26T00:58:14Z

Optional Get Outlook for Android<https://aka.ms/AAb9ysg>Optional

…

________________________________ From: Maciej Gurban ***@***.***> Sent: Saturday, March 25, 2023 11:43:52 PM To: mui/material-ui ***@***.***> Cc: Subscribed ***@***.***> Subject: Re: [mui/material-ui] Custom theme not propagated within Storybook.js (#24282) I ended up trying to define a story wrapper within the same package as my components and import it into Storybook's preview.ts, and that seems to solve the issue, and doesn't require double-wrapping the theme. Here's what I'm using: Storybook's preview.tsx import StoryWrapper from ***@***.***/components/story-theme-wrapper'; import type { Story } from ***@***.***/react'; function Theme(Story: Story) { return ( <StoryWrapper> <Story /> </StoryWrapper> ); } export const decorators = [Theme]; The StoryWrapper import React from 'react'; import CssBaseline from ***@***.***/material/CssBaseline'; import { ThemeProvider } from ***@***.***/material/styles'; import theme from ***@***.***/components/theme'; const StoryWrapper = ({ children }) => ( <ThemeProvider theme={theme}> <CssBaseline /> {children} </ThemeProvider> ); export default StoryWrapper; I then removed emotionAlias: false from main.tsx and theme continues working as expected. My monorepo structure boils down to: packages/ components/ theme/ my-component/ my-component.tsx my-component.story.tsx storybook/ config/ preview.tsx main.tsx — Reply to this email directly, view it on GitHub<#24282 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A2FFCYKVJZUH6FXOIOMLUC3W55YKRANCNFSM4VV7E4NA>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

siriwatknp · 2023-09-21T04:21:08Z

I believe that this issue is no longer exists with the storybook v7+

robphoenix added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 5, 2021

oliviertassinari added external dependency Blocked by external dependency, we can’t do anything about it package: styled-engine Specific to @mui/styled-engine and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 5, 2021

mnajdova mentioned this issue Jan 21, 2021

[styled-engine] Move @emotion/styled to dependencies #24525

Closed

oliviertassinari changed the title ~~Custom theme not picked up by sx prop when used within Storybook.js~~ Custom theme not working within Storybook.js Feb 16, 2021

oliviertassinari mentioned this issue Feb 16, 2021

Storybook adds default styles after migration to 5.0.0 #24965

Closed

oliviertassinari added the bug 🐛 Something doesn't work label Feb 16, 2021

Pushplaybang mentioned this issue Feb 28, 2021

[material-ui][examples] Create a Storybook template #21111

Open

1 task

oliviertassinari mentioned this issue Mar 10, 2021

v5: experimentalStyled provides DefaultTheme when running inside Storybook #25296

Closed

2 tasks

totszwai mentioned this issue Mar 9, 2022

Unable to get theme object with useTheme inside a Story storybookjs/storybook#17668

Closed

nathggns added a commit to hashintel/hash that referenced this issue Mar 11, 2022

Add MUI theme to Storybook

d114d72

Now using alpha storybook for emotion 11 support, which is required for MUI See mui/material-ui#24282 and storybookjs/storybook#17000

ryogosteeny mentioned this issue Mar 13, 2022

　materialuiの追加とcreatethemeの設定 ryogosteeny/agile-project-management#17

Merged

nathggns added a commit to hashintel/hash that referenced this issue Mar 14, 2022

Add MUI theme to Storybook

4c5b56d

Now using alpha storybook for emotion 11 support, which is required for MUI See mui/material-ui#24282 and storybookjs/storybook#17000

nathggns added a commit to hashintel/hash that referenced this issue Mar 14, 2022

Add MUI theme to Storybook

72e640e

Now using alpha storybook for emotion 11 support, which is required for MUI See mui/material-ui#24282 and storybookjs/storybook#17000

nathggns added a commit to hashintel/hash that referenced this issue Mar 29, 2022

Add MUI theme to Storybook

10e9748

Now using alpha storybook for emotion 11 support, which is required for MUI See mui/material-ui#24282 and storybookjs/storybook#17000

tchojnacki mentioned this issue Apr 18, 2022

Finish implementation of home page #150 CodersCamp2021-HK/CodersCamp2021.Project.Fullstack#154

Merged

6 tasks

cherniavskii mentioned this issue May 4, 2022

[Storybook] Theme is not passed to the components mui/mui-x#4757

Closed

2 tasks

santilp95 mentioned this issue Jun 2, 2022

> ```emotion-theming'" was delete #32989

Closed

sherizada-okta mentioned this issue Jun 8, 2022

Add MUI theme decorator and Typography styles okta/odyssey#1494

Merged

siriwatknp mentioned this issue Mar 28, 2023

[system] Introduce theme scope for using multiple design systems #36664

Merged

4 tasks

stkzk3110 mentioned this issue Apr 7, 2023

✨ #41 ヘッダーコンポーネントの追加 commew/timelogger-web#45

Merged

siriwatknp closed this as completed Sep 21, 2023

Custom theme not propagated within Storybook.js #24282

Custom theme not propagated within Storybook.js #24282

Comments

robphoenix commented Jan 5, 2021

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Context 🔦

Your Environment 🌎

oliviertassinari commented Jan 5, 2021 • edited Loading

robphoenix commented Jan 6, 2021 • edited Loading

Andarist commented Jan 6, 2021

oliviertassinari commented Jan 7, 2021

Andarist commented Jan 7, 2021 • edited Loading

oliviertassinari commented Jan 7, 2021

Andarist commented Jan 7, 2021

robphoenix commented Jan 12, 2021 • edited Loading

Andarist commented Jan 12, 2021

oliviertassinari commented Jan 13, 2021

robphoenix commented Jan 13, 2021 • edited Loading

eps1lon commented Jan 21, 2021

oliviertassinari commented Jan 21, 2021 • edited Loading

eps1lon commented Jan 21, 2021

robphoenix commented Jan 22, 2021

Pushplaybang commented Feb 28, 2021

oliviertassinari commented Feb 28, 2021

Pushplaybang commented Feb 28, 2021

oliviertassinari commented Feb 28, 2021 • edited Loading

Pushplaybang commented Feb 28, 2021

selenehyun commented Mar 4, 2022

Ox24 commented Mar 8, 2022

Andarist commented Mar 8, 2022

totszwai commented Mar 9, 2022 • edited Loading

marvinguors commented Mar 11, 2022 • edited Loading

Jaypov commented Mar 23, 2022

joanrodriguez commented Apr 3, 2022

iceniveth commented Apr 28, 2022

susilthapa commented May 19, 2022

AlexanderKositsyn commented Sep 9, 2022

jmbeach commented Dec 6, 2022

oliviertassinari commented Feb 6, 2023

maciej-gurban commented Mar 9, 2023 • edited Loading

maciej-gurban commented Mar 25, 2023 • edited Loading

Wire1lovet commented Mar 26, 2023 via email

siriwatknp commented Sep 21, 2023

oliviertassinari commented Jan 5, 2021 •

edited

Loading

robphoenix commented Jan 6, 2021 •

edited

Loading

Andarist commented Jan 7, 2021 •

edited

Loading

robphoenix commented Jan 12, 2021 •

edited

Loading

robphoenix commented Jan 13, 2021 •

edited

Loading

oliviertassinari commented Jan 21, 2021 •

edited

Loading

oliviertassinari commented Feb 28, 2021 •

edited

Loading

totszwai commented Mar 9, 2022 •

edited

Loading

marvinguors commented Mar 11, 2022 •

edited

Loading

maciej-gurban commented Mar 9, 2023 •

edited

Loading

maciej-gurban commented Mar 25, 2023 •

edited

Loading