一些元素在materialUI中不响应服装主题

Question

所以当我在materialUI中应用自定义主题(特别是改变字体)时，有些组件会改变字体，有些则不会，我不知道为什么。基本上，所有使用<Typography>组件的导入组件，如果它们嵌套在其他materialUI组件中，都不会得到应用的主题。

import classes from "./App.module.css";
import Form from "./components/Form";
import Text from "./components/Text";
import { createTheme, ThemeProvider } from "@material-ui/core";
const theme = createTheme({
typography: {
fontFamily: "Grey Qo",
fontSize: 25,
},
});
function App() {
return (
<div className={classes.wrapper}>
<ThemeProvider theme={theme}>
<Text></Text>
<Form></Form>
</ThemeProvider>
</div>
);
}
export default App;

输入图片描述

在图片中，你可以看到表单字体和顶部按钮的变化，因为他们没有使用<Typography>组件，但其余的保持不变

这也是一个导入React<Text>组件的例子

import { Typography } from "@mui/material";
import { makeStyles } from "@material-ui/styles";
import React from "react";
import classes from "./Text.module.css";
const useStyles = makeStyles({
text: {
color: "#f0f0f0",
},
});
export default function Text() {
const uiClasses = useStyles();
return (
<div className={classes.wrapper}>
<Typography variant="h4" className={uiClasses.text}>
Learn code by watching others
</Typography>
<Typography className={uiClasses.text}>
See how expirienced developers solve problems in real-time. Watching
scripted tutorilas is great, but understanding how developers thinks is
invalubale
</Typography>
</div>
);
}

这个字体是为了使问题更明显，希望有人能帮助。TNX晚期

Answer 1

也许是因为您导入的Text.module.css或其他css文件覆盖了由材料主题设置的字体族，您可以检查元素到不应用正确字体的元素，以确切地知道样式来自何处。

另一件重要的事情是，当使用材料时，有一个jss实现，即你正在使用的makeStyles，它将是令人敬畏的，足以让你工作。所以你不必再使用css模块了。希望我的提示能帮到你!