React 18 - MUI - change font family-CodePudding

I create a theme to change the default font family of MUI But it didn't work.

this is my theme component:

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  typography: {
    fontFamily: ["samim", "vazir"].join(","),
  },
});

export default theme;

I use the theme component in my main app.tsx to change the font in all parts of my project

import React from "react";
import { ThemeProvider } from "@material-ui/styles";
import theme from "./theme/theme";
import Routes from "./routes/Routs";

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Routes />;
    </ThemeProvider>
  );
};

export default App;

can anyone help me, please?

CodePudding user response：

You can try this.

Prepare theme component like below.

import { createTheme } from '@mui/material/styles';
const theme = createTheme({
   typography: {
    "fontFamily": `"samim", "vazir"`,   
   }
});

Then you can apply this in app.js like below.

    import theme from "./theme/theme";
    import Routes from "./routes/Routes";
    import { ThemeProvider } from '@mui/material/styles';

    const App = () => (
      <ThemeProvider theme={theme}>
         <Routes />;
      </ThemeProvider>
    );

ReactDOM.render(<App />, document.getElementById('app'));
``

I guess that issue was belong to ThemeProvider...

CodePudding user response：

Created Code sandbox Demo for customizing Material UI Theme, Demo Link

You would need to use Typography component where you are using text for theme part to take effect

Link from official Docs https://mui.com/material-ui/customization/typography/

Also, you would need to import ThemeProvider from @mui/material/styles