CODEWITHSUNDEEP
reactjsmaterial-ui
bigpotato
bigpotato

Reputation: 27527

MUI v5 + Storybook: Theme and font family do not work in storybook

I am facing an issue where the MUI theme works in codesandbox but not in storybook

Demo to show it working WITHOUT storybook: https://codesandbox.io/s/typescript-material-ui-textfield-ojk3h?file=/src/App.tsx

Demo showing that it breaks WITH storybook Git repo: https://github.com/EdmundMai/mui-v5-storybook

This is my component:

import React from "react";
import styled from "styled-components";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import MuiTextField from "@mui/material/TextField";

const StyledTextField = styled(MuiTextField)`
  width: 288px;
`;

const theme = createTheme({
  typography: {
    allVariants: {
      fontFamily: "serif",
      fontSize: "12px",
    },
  },
});

const ThemeProviderMine = () => (
  <ThemeProvider theme={theme}>
    <StyledTextField placeholder="Foobar" label={"Select a foobar"} />
  </ThemeProvider>
);

export default ThemeProviderMine;

As you can see, on codesandbox everything works fine. My custom font and font size are both used:

enter image description here

However, my custom font and font size are ignored when I use storybook:

enter image description here

Does anyone know why this is the case?

Upvotes: 9

Views: 9908

Answers (3)

user2836501
user2836501

Reputation: 522

The simplest solution I found that worked is:

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

const theme = createTheme({
    palette: {
        primary: {
            main: '#000000'
        },
        secondary: {
            main: '#ff00ff'
        }
    }
});

export const decorators = [
    (Story) => (
        <MUIThemeProvider theme={theme}>
            <ThemeProvider theme={theme}>
                {Story()}
            </ThemeProvider>
        </MUIThemeProvider>
    )
];

You can import your own theme instead of creating it inline.

Upvotes: 3

MHase
MHase

Reputation: 332

all I had to do in my case was simply add:

features: {
  emotionAlias: false,
},

in .storybook/main.js

Upvotes: 33

bigpotato
bigpotato

Reputation: 27527

Holy moly I fixed it. So apparently there is an incompability with Storybook <6.3 since it relies on @emotion/styled v10, while MUI v5 must use v11.

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility

This is how I fixed it

react-storybook-typescript main % git diff
diff --git a/.storybook/main.js b/.storybook/main.js
index b53b802..bb5fb01 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,4 +1,8 @@
 module.exports = {
-    stories: ['../src/**/*.stories.tsx'],
-    addons: ['@storybook/addon-docs']
-};
\ No newline at end of file
+  stories: ["../src/**/*.stories.tsx"],
+  addons: ["@storybook/addon-docs"],
+  features: {
+    emotionAlias: false,
+  },
+};
+
diff --git a/package-lock.json b/package-lock.json
index 456a0ac..c066ac7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "cra-ts",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.7.0", // <--- not sure if this is required
+        "@emotion/styled": "^11.6.0", // <--- not sure if this is required
         "@mui/lab": "5.0.0-alpha.59",
         "@mui/material": "5.2.2",
         "@mui/styles": "^5.2.3",
@@ -29,8 +31,8 @@
       },
       "devDependencies": {
         "@babel/core": "^7.10.2",
-        "@storybook/addon-docs": "6.3.12",
-        "@storybook/react": "6.3.12",
+        "@storybook/addon-docs": "^6.4.8",
+        "@storybook/react": "^6.4.8",
         "babel-loader": "^8.1.0"
       }
     },

Upvotes: 1

Related Questions