React 18 -MUI-更改字体家庭

Question

我创建了一个主题来更改MUI的默认字体家族 但这无效。

这是我的主题组件：

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

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

export default theme;

我在我的主app.tsx中使用主题组件来更改项目所有部分的字体

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;

，任何人可以帮助我吗？

Answer 1

更改整个项目字体家族的最佳方法是使用MUI的 csssbaseline 。

theme.ts：

import { createTheme } from '@mui/material/styles';
import samim from "./assets/fonts/samim.ttf";

const theme = createTheme({
   typography: {
    "fontFamily": `"samim", "vazir"`,   
   }, 
   components: {
    MuiCssBaseline: {
      styleOverrides: `
        @font-face {
          font-family: 'samim';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: local('samim'), local('samim'), url(${samim}) format('truetype');
          unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
        }
      `,
    },
});

app.tsx：

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}>
      <CssBaseline />
      <Routes />;
    </ThemeProvider>
  );
};

export default App;

Answer 2

您可以尝试一下。

准备如下的主题组件。

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

然后，您可以在以下内容中应用于app.js。

    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...

Answer 3

创建的代码沙盒演示用于自定义材料UI主题，
demo link

您在哪里使用文本进行主题来进行

官方文档的链接
https：//mui.com/material-ui/customization y/customization/typography/

也，您需要从 @mui/材料/样式导入theprovider