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

Question

我正在尝试将 Google 的

NotoSansSC-Regular.otf

添加到

react-admin

，以便简体中文的默认字体就是这样。如果我通过 a:

在根 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')

中的裸文件名），这正是我通过 CSS 包含在 index.html 中时起作用的。

我看到的一些示例将

<CssBaseline />

直接放在 JSX 中的

ThemeProvider

内，但

react-admin

位于一个位置，尝试和覆盖非常不方便，因为我不知道这是否是问题所在，并且将其放在其他可能的位置（外部或内部

<Admin />

）没有什么区别。

Answer 1

如果您使用 Mui v5，语法略有不同：

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 演示

Answer 2

我的 Mui v5 和多种字体的解决方案：

import AbradeRegular from 'assets/fonts/Abrade-Regular.ttf'
import AbradeMedium from 'assets/fonts/Abrade-Medium.ttf'
....

const abradeRegular = {
  fontFamily: 'Abrade',
  fontStyle: 'normal',
  fontWeight: 'normal',
  src: `url(${AbradeRegular}) format('truetype')`,
}

const abradeMedium = {
  fontFamily: 'Abrade',
  fontStyle: 'normal',
  fontWeight: 500,
  src: `url(${AbradeMedium}) format('truetype')`,
}
....

theme.components = {
  MuiCssBaseline: {
    styleOverrides: {
      html: [
        {'@font-face': abradeLight},
        {'@font-face': abradeRegular},
        {'@font-face': abradeMedium},
        {'@font-face':abradeSemiBold},
        {'@font-face': abradeBold},
        {'@font-face':abradeExtraBold},
        {'@font-face':abradeBlack}
      ],
      'html, body': {
        padding: 0,
        scrollbarWidth: 'thin',
      },
}}}

Answer 3

Mui 文档的字符串 CSS 模板语法：

警告，小陷阱：不要在 @font-face 声明之间添加逗号

,

。

import PoppinsRegular from '@assets/fonts/poppins-regular.woff2';
import PoppinsBold from '@assets/fonts/poppins-bold.woff2';
import PoppinsSemiBold from '@assets/fonts/poppins-semibold.woff2';

const theme = createTheme({
  typography: {
    fontFamily: [
        'Poppins',
        'sans-serif',
        ].join(','),
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        @font-face {
          font-family: 'Poppins';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: url(${PoppinsRegular}) format('woff2');
        }
        @font-face {
          font-family: 'Poppins';
          font-style: normal;
          font-display: swap;
          font-weight: 700;
          src: url(${PoppinsBold}) format('woff2');
        }
        @font-face {
          font-family: 'Poppins';
          font-style: normal;
          font-display: swap;
          font-weight: 600;
          src: url(${PoppinsSemiBold}) format('woff2');
        },
      `,
    },
  },
});