反应管理添加字体覆盖 MuiCssBaseline @global @font-face 不工作

Question

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

  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') 中的裸文件名），这正是我通过 [=28 包含时的工作方式=] 在 index.html.

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

Answer 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

反应管理添加字体覆盖 MuiCssBaseline @global @font-face 不工作

react-admin add font with override MuiCssBaseline @global @font-face not working

css

reactjs

material-ui

font-face

react-admin