es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

react-admin añadir fuente con override MuiCssBaseline @global @font-face no funciona

31 Jul, 2023 Programación

Estoy tratando de agregar el archivo “NotoSansSC-Regular.otf” de Google a “react-admin” para que sea la fuente predeterminada para el chino simplificado. Hasta ahora, he logrado que funcione si incluyo las fuentes en el archivo HTML raíz mediante CSS:

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

En mis temas. Todos los ejemplos que encontré sugieren que también puedo lograr que funcione de esta manera:

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],
      },
    },
...
}

Ninguno de los intentos que hice funcionó, incluido el uso de la misma URL (solo el nombre de archivo en bruto en url('NotoSansSC-Regular.otf')), que es exactamente lo que funciona cuando lo incluyo a través de CSS en el index.html.

Algunos de los ejemplos que vi colocaron <cssbaseline></cssbaseline> directamente dentro de un ThemeProvider en JSX, pero en react-admin está en un lugar muy incómodo para intentar modificar, dado que no tengo idea si ese es el problema, y colocarlo en otros posibles lugares (fuera o dentro de <admin></admin>) no hace ninguna diferencia.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para agregar NotoSansSC-Regular.otf a React-Admin

    Para agregar la fuente NotoSansSC-Regular.otf de Google a react-admin, puedes seguir estos pasos:

    1. Coloca el archivo de fuente NotoSansSC-Regular.otf en la carpeta public/fonts/chinese/ dentro del directorio de tu aplicación de React.

    2. En el componente donde deseas usar la fuente, impórtala usando el siguiente código:

      import notoFont from "../../public/fonts/chinese/NotoSansSC-Regular.otf";

    3. Define un objeto de tipo font face usando la fuente importada, de la siguiente manera: 
      const notoFontFace = {
 fontFamily: "notoFont",
 fontStyle: "normal",
 fontWeight: "400",
 src: `
     url(${notoFont}) format('opentype')
 `,
};

      Aquí, notoFont es la fuente importada y notoFontFace es el objeto de tipo font face que estamos definiendo.

    4. Ahora, define tu objeto de tema y agrega el font face a los estilos globales de la siguiente manera:

      const myTheme = createMuiTheme({
 typography: {
   fontFamily: ["Roboto", "Helvetica", "Arial", "sans-serif"].join(","),
   ...
 },
 overrides: {
   MuiCssBaseline: {
     "@global": {
       "@font-face": [notoFontFace],
     },
   },
   ...
 },
 ...
});

      Aquí, estamos agregando el font face notoFontFace a los estilos globales usando el componente MuiCssBaseline, que es proporcionado por Material UI para aplicar la normalización CSS.

      Al agregar notoFontFace a los estilos globales, puedes usar notoFont en cualquier componente sin importarlo explícitamente.

      Además, asegúrate de envolver tu aplicación con el componente ThemeProvider y pasarle el objeto myTheme.

      <themeprovider theme="{myTheme}">
 <app></app>
</themeprovider>

      Esto debería funcionar y verás tu fuente simplificada china en tu aplicación.

Comments are closed.