La característica styleOverrides del tema es extremadamente poderosa y versátil. En la sección Anulaciones basadas en accesorios de la documentación, puede encontrar un ejemplo de cómo especificar una devolución de llamada dentro de las styleOverrides de estilo que luego le dan acceso a los accesorios y el estado del componente (a través ownerState ) y al tema.

A continuación se muestra un ejemplo que muestra cómo la sintaxis de devolución de llamada le da acceso al tema y cómo puede aprovechar el estado de ownerState para hacer estilos condicionales basados en los accesorios pasados a un componente (por ejemplo, en función de si se especificó o no startIcon o qué variant fue utilizado o cualquier combinación de interés).

 import * as React from "react"; import Stack from "@mui/material/Stack"; import Button from "@mui/material/Button"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import SaveIcon from "@mui/icons-material/Save"; const theme = createTheme({ themeName: "Default (Mortgage Hub)", spacing: 4, components: { MuiButton: { styleOverrides: { root: ({ ownerState, theme }) => { const conditionalStyles = {}; if (ownerState.startIcon !== undefined) { conditionalStyles.paddingLeft = theme.spacing(6); if (ownerState.variant === "outlined") { conditionalStyles.border = "5px solid black"; conditionalStyles["&:hover"] = { border: "5px solid grey" }; } } else { conditionalStyles.paddingLeft = theme.spacing(4); } return { ...conditionalStyles, paddingRight: theme.spacing(4) }; } } } } }); export default function BasicButtons() { return ( <ThemeProvider theme={theme}> <Stack spacing={2} direction="row"> <Button variant="text">Text</Button> <Button variant="contained">Contained</Button> <Button variant="outlined">Outlined</Button> <Button startIcon={<SaveIcon />} variant="contained"> Contained with startIcon </Button> <Button startIcon={<SaveIcon />} variant="outlined"> Outlined with startIcon </Button> </Stack> </ThemeProvider> ); }