MUI v5+故事书:主题和字体系列在故事书中不起作用 [英] MUI v5 + Storybook: Theme and font family do not work in storybook
本文介绍了MUI v5+故事书:主题和字体系列在故事书中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我面临的问题是MUI主题在codesandbox中工作,而不是在故事书中工作
演示它在没有故事书的情况下工作: 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;
如您所见,在codesandbox上一切工作正常。我的自定义字体和字体大小都使用了:
但是,当我使用故事书时,我的自定义字体和字体大小被忽略:
有人知道为什么会这样吗?
推荐答案
天哪我修好了。显然,由于Storybook<;6.3依赖于@Emotion/Style v10,而MUI v5必须使用v11,因此它显然不兼容。
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"
}
},
这篇关于MUI v5+故事书:主题和字体系列在故事书中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文