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:

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

Does anyone know why this is the case?

Solution 1:

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

features: {
  emotionAlias: false,
},

in .storybook/main.js