MUI v5 + Storybook：主题和字体系列在 Storybook 中不起作用

Posted 2023-02-19

【中文标题】MUI v5 + Storybook：主题和字体系列在 Storybook 中不起作用

【英文标题】：MUI v5 + Storybook: Theme and font family do not work in storybook

【发布时间】：2022-01-12 03:03:30

【问题描述】：

我遇到了一个问题，即 MUI 主题在代码沙盒中有效，但在故事书中无效

演示它在没有故事书的情况下工作： https://codesandbox.io/s/typescript-material-ui-textfield-ojk3h?file=/src/App.tsx

演示表明它与故事书一起打破 Git 仓库：https://github.com/EdmundMai/mui-v5-storybook

这是我的组件：

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;

如您所见，在代码沙盒上一切正常。我的自定义字体和字体大小都使用了：

但是，当我使用故事书时，我的自定义字体和字体大小会被忽略：

有人知道为什么会这样吗？

【参考方案1】：

天哪，我修好了。显然，Storybook

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

我就是这样解决的

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"
       
     ,