Unable to get theme object with useTheme inside a Story

[totszwai]

Related: mui/material-ui#24282 (comment)

I'm facing an issue where I am unable to grab the theme object inside a Story unless some hack is used.
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?

[isaac-ivins]

You can place the theme provider in the decorators like so ( using react-navigation here )

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { ComponentMeta, ComponentStory } from '@storybook/react';

import Button from './MyButton';
import { CustomTheme } from '../constants/theme';

export default {
  title: 'components/Button',
  component: Button,
  decorators: [
    (Story) => (
      <NavigationContainer theme={CustomTheme}>
        <Story />
      </NavigationContainer>
    ),
  ],
} as ComponentMeta<typeof Button>;

export const Basic: ComponentStory<typeof Button> = (args) => {
  return <Button {...args} />;
};

Basic.args = {
  label: 'Button',
};

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).