Some elements not responding to the costum theme in materialUI - reactjs

Question

So when I apply a custom theme in materialUI (specifically changing the font) some of the components change the font and some don't and I don't know why. Basically, all the imported components that use the <Typography> component don't get the applied theme if they are nested inside other materialUI components or not.
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
In the picture you can see the form font and the top button change becuase they dont use the <Typography> component but the rest stay the same
Here is also an example of the React <Text> component which is imported
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>
);
}
This font is used to make the problem more obvious, hope someone can help. tnx in advanced

Answer 1

Maybe because you imported Text.module.css or the other css files are overriding the font family that is set by material theme, you can inspect elements to the one that does not apply the correct font to know exactly where is the style come from.
One more important thing is when using material there's a jss implementation that is the makeStyles you're using, it would be awesome and good enough for you to work with. so you don't have to use css module anymore. Hope my hint can help you!