某些元素不响应材质 UI 中的自定义主题

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;

enter image description here

在图片中，您可以看到表单字体和顶部按钮发生变化，因为它们不使用<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 模块了。希望我的提示可以帮助到你！