0
312
VistasMUI: no se puede anular fontFamily mediante el anidamiento de temas
Estoy tratando de que diferentes partes de mi aplicación tengan diferentes fuentes. Quiero lograr esto mediante el anidamiento de temas: https://mui.com/styles/advanced/#theme-nesting .
Pero el anidamiento de temas no funciona cuando se anulan las fuentes.
Aplicación.js:
import React from "react"; import { ThemeProvider, Button, Typography } from "@mui/material"; import outerTheme from "./outerTheme"; import innerTheme from "./innerTheme"; const App = () => { return ( <ThemeProvider theme={outerTheme}> <Button>outer</Button> <Typography color="primary">outer</Typography> <ThemeProvider theme={innerTheme}> <Button>inner</Button> <Typography color="primary">inner</Typography> </ThemeProvider> </ThemeProvider> ); }; export default App;temaexterno.js:
import { createTheme } from "@mui/material"; const outerTheme = createTheme({ palette: { primary: { main: "#ff0000", }, }, typography: { fontFamily: "sans-serif", }, }); export default outerTheme;temainterno.js:
import { createTheme } from "@mui/material"; import outerTheme from "./outerTheme"; const innerTheme = createTheme(outerTheme, { palette: { primary: { main: "#0000ff", }, }, typography: { fontFamily: "serif", }, }); export default innerTheme;El resultado muestra que todos los botones y tipografías usan la fuente del tema externo (es decir, sans-serif) pero usan los colores correctos del tema respectivo.
1 Respuestas
Responde la pregunta0
El tema anidado funciona, es solo que su fontFamily nunca se configura en primer lugar. Si desea anular la familia de fuentes de Button , debe establecer el valor en typography.button.fontFamily , no en typography.fontFamily ( fuente ):
const outerTheme = createTheme({ typography: { button: { fontFamily: 'sans-serif', }, }, }); const innerTheme = createTheme(outerTheme, { typography: { button: { fontFamily: 'serif', }, }, }); EDITAR: para anular la familia de fontFamily de todos los componentes de MUI, debe actualizar todas las variantes:
function createFontFamily(fontFamily) { return { h1: { fontFamily }, h2: { fontFamily }, h3: { fontFamily }, h4: { fontFamily }, h5: { fontFamily }, h6: { fontFamily }, subtitle1: { fontFamily }, subtitle2: { fontFamily }, body1: { fontFamily }, body2: { fontFamily }, button: { fontFamily }, caption: { fontFamily }, overline: { fontFamily }, }; } const outerTheme = createTheme({ typography: createFontFamily('sans-serif'), }); const innerTheme = createTheme(outerTheme, { typography: createFontFamily('serif'), }); 