How do I customize the style of a button component in MUI V5? I've been trying to combine old methods with the new version, but it's not working as expected.
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 CustomButton(props) {
const { color, children, onClick } = props;
return (
<Button
className={`${StyledButton["root"]} ${StyledButton[color]}`}
onClick={onClick}
>
{children}
</Button>
);
}
Now to use this Button with a "secondary" color:
import CustomButton from "./CustomButton";
import { Close } from "@mui/icons-material";
export default function Header() {
return (
<CustomButton color="secondary">
<Close />
</CustomButton>
)
}