0
147
Vistas¿Cómo pasar un estilo personalizado al componente con estilo MUI V5?
Usando MUI V5, ¿cómo puedo pasar un estilo personalizado a un componente de botón? Esto es lo que he estado tratando de fusionar de la manera anterior con el nuevo MUI v5, pero no funciona.
import { Button } from "@mui/material"; import { styled } from "@mui/material/styles"; import React from "react"; const StyledButton = styled(Button)(({ theme }) => ({ root: { minWidth: 0, margin: theme.spacing(0.5), }, secondary: { backgroundColor: theme.palette.secondary.light, "& .MuiButton-label": { color: theme.palette.secondary.main, }, }, primary: { backgroundColor: theme.palette.primary.light, "& .MuiButton-label": { color: theme.palette.primary.main, }, }, })); export default function ActionButton(props) { const { color, children, onClick } = props; return ( <Button className={`${StyledButton["root"]} ${StyledButton[color]}`} onClick={onClick} > {children} </Button> ); }Ahora me gustaría llamar a este Botón y darle color="secundario"
import ActionButton from "./ActionButton"; import { Close } from "@mui/icons-material"; export default function Header() { return ( <ActionButton color="secondary"> <Close /> </ActionButton> ) }2 Respuestas
Responde la pregunta0
Parece que su código fue un intento de migrar desde el código usando makeStyles/useStyles , pero styled funciona de manera bastante diferente. No puede usarlo para generar múltiples clases de CSS como lo hace makeStyles ( StyledButton["root"] y StyledButton[color] no estarán undefined ). styled generará una sola clase CSS que luego se pasa en el prop className al componente envuelto (por ejemplo, Button ). En lugar de intentar crear varias clases de CSS con lógica para decidir qué clase aplicar, con styled puede aprovechar los accesorios (por ejemplo, el accesorio de color ) para generar estilos dinámicos dentro de la única clase de CSS que se genera.
A continuación se muestra un ejemplo que creo que logra el efecto que buscaba su código. Mi ejemplo no hace nada con MuiButton-label porque esa clase no existe en v5 (y el <span> al que se aplicó la clase dentro del <button en v4 tampoco existe), y creo que el botón predeterminado los estilos establecen color como se desee cuando se permite que la propiedad de color pase a Button .
import Button from "@mui/material/Button"; import { styled } from "@mui/material/styles"; const StyledButton = styled(Button)(({ theme, color }) => ({ minWidth: 0, margin: theme.spacing(0.5), backgroundColor: color ? theme.palette[color].light : undefined })); export default StyledButton; 
0
poner StyledButton en lugar de la etiqueta Button
import { Button } from "@mui/material"; import { styled } from "@mui/material/styles"; import React from "react"; const StyledButton = styled(Button)(({ theme }) => ({ root: { minWidth: 0, margin: theme.spacing(0.5), }, secondary: { backgroundColor: theme.palette.secondary.light, "& .MuiButton-label": { color: theme.palette.secondary.main, }, }, primary: { backgroundColor: theme.palette.primary.light, "& .MuiButton-label": { color: theme.palette.primary.main, }, }, })); export default function ActionButton(props) { const { color, children, onClick } = props; return ( <StyledButton onClick={onClick} > {children} </StyledButton> ); }