Estoy tratando de hacer que mi componente se vea diferente en función de accesorios como, por ejemplo, "variante" usando la función de styled como se muestra a continuación:
import { styled } from '@mui/material/styles'; const RemoveButton = styled(Button)(({ theme }) => ({ backgroundColor: 'lightgreen', })); function App() { return ( <> <RemoveButton>Remove Button</RemoveButton> </> ); } export default App; Entonces, por ejemplo, ¿qué puedo hacer si quiero que mi componente sea rojo cuando variant="contained" y azul cuando variant="outlined" ?
Si desea diseñar el componente en función de sus accesorios usando styled :
const RemoveButton = styled(Button)(({ variant }) => ({ ...(variant === "contained" && { backgroundColor: "red" }), ...(variant === "outlined" && { backgroundColor: "blue" }) })); También puede crear su propia variante personalizada usando createTheme , consulte esta respuesta para obtener más detalles.
De acuerdo, no importa, lo descubro por mi cuenta, es esa solución recomendada por mui, pero eso funciona para mí, así que:
const RemoveButton = styled(Button)(({ theme, ...otherProps }) => ({ backgroundColor: {"contained":"red","outlined":"green"}[otherProps.variant], padding: theme.spacing(1), }));