react-admin 添加字体并覆盖 MuiCssBaseline @global @font-face 不起作用答案

【问题标题】：react-admin add font with override MuiCssBaseline @global @font-face not workingreact-admin 添加字体并覆盖 MuiCssBaseline @global @font-face 不起作用
【发布时间】：2022-01-01 04:06:33
【问题描述】：

我正在尝试将来自 Google 的 NotoSansSC-Regular.otf 添加到 react-admin 以便简体中文的默认字体就是那个。如果我通过以下方式对根 html 文件中的字体进行 CSS 包含，我已经成功地让它工作了：

  typography: {
    fontFamily: ["Roboto", "Helvetica", "Arial", "sans-serif", "notasansregular"].join(","),
  },

在我的主题中。我发现的所有示例都表明我也可以通过以下方式完成此工作：

import notasansregular from "../../public/fonts/chinese/NotoSansSC-Regular.otf";
...
const notafont = {
  fontFamily: "notasansregular",
  fontStyle: "normal",
  fontWeight: "normal",
  src: `
    url(${notasansregular}) format('opentype')
  `,
};
...
const myTheme = {
...
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [notafont],
      },
    },
...
}

但我没有尝试过让它正常工作，包括使用相同的 URL（只是 url('NotoSansSC-Regular.otf') 中的裸文件名），这正是我在 index.html 中通过 CSS 包含时的工作原理。

我看到的一些示例将 <CssBaseline /> 直接放在 JSX 中的 ThemeProvider 中，但 react-admin 在某个地方尝试覆盖非常不方便，因为我不知道这是否是问题并将其放置在其他可能的地方（外部或内部<Admin />）没有区别。

【问题讨论】：

标签： css reactjs material-ui font-face react-admin

【解决方案1】：

如果您使用的是 Mui v5，the syntax is slightly different:

const myTheme = createTheme({
  components: { // not overrides!
    MuiCssBaseline: {
      styleOverrides: `
        @font-face {
          font-family: 'Noto Sans SC';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: local('NotoSansSC'), 
               local('NotoSansSC-Regular.otf'), 
               url(${notasansregular}) format('otf');
          unicodeRange: // the unicode range for SC
        }
      `,
    },
  },
})

预计到达时间： Mui 4 demo

【讨论】：

谢谢，但我仍然在 v4 上，而 react-admin 还没有更新。
@AntonOfTheWoods 我添加了 MUI 4 版本。