Aunque he visto preguntas similares, ninguna parece abordar mi situación.

Estoy migrando MUI v4 a MUI v5, y me encantan los casos en los que un estilo particular viene de forma externa. Por ejemplo, así es como se vería usando makeStyles :

 const useStyles = makeStyles((theme) => { typographyRoot: ({ color }) => ({ padding: theme.spacing(1), color }) }) const Example = ({ color }) => { const classes = useStyles({ color }) return ( <Typography variant="body1" classes={{ root: classes.typographyRoot }}> Some example </Typography> ) }

Ahora estoy intentando hacer esto usando componentes con styled , ¿cómo pasaría el accesorio de color como lo hice en useStyles?

Esto es lo que tengo actualmente:

 const StyledTypography = styled(Typography)(({ theme }) => ({ padding: theme.spacing(1), color // how to pass in color in this styled component })) const Example = ({ color }) => { return ( <StyledTypography variant="body1"> Some example </StyledTypography> ) }

Supongamos que pudiera envolver StyledComponent en una función y pasarla allí, pero siento que debe haber una forma más apropiada de hacerlo. Específicamente:

 const getStyledTypography = (color) => styled(Typography)(({ theme }) => ({ padding: theme.spacing(1), color })) const Example = ({ color }) => { const StyledTypography = getStyledTypography(color) return ( <StyledTypography variant="body1"> Some example </StyledTypography> ) }

De todos modos, ¿cuál es la forma correcta de pasar accesorios adicionales a un componente con estilo de esta manera?