I want to style the Button Component with some properties but I see that I can't use classname in updated MUI5
Solution 1:
You can also use sx
to add css to components in MUI 5
<Button
sx={{color: "red",
backgroundColor: "black",
padding: "1rem"}}
variant="contained"
size="medium"
startIcon={<DeleteIcon />}
endIcon={<SendIcon />}
>
Material UI
</Button>
Solution 2:
Try to use the code below
const StyledButton = styled(Button)(() => ({
color: "red",
backgroundColor: "black",
padding: "1rem",
}));
In the first ()
you need to pass the material ui component as the named export and then you can use the const-name.
So in your code in stead of <Button></Button>
you will use the <StyledButton></StyledButton>
Usage:
<StyledButton
variant="contained"
size="medium"
startIcon={<DeleteIcon />}
endIcon={<SendIcon />}
>
Material UI
</StyledButton>
Solution 3:
you need to use !important
to overwrite styles and styled(Button)
as it is clear in code. complete version is here in sandbox
import * as React from "react";
import { styled } from "@mui/styles";
import Button from "@mui/material/Button";
import DeleteIcon from "@mui/icons-material/Delete";
import SendIcon from "@mui/icons-material/Send";
const MyButton = styled(Button)({
backgroundColor: "#000 !important",
color: "red !important",
padding: "1rem !important"
});
export default function App() {
return (
<MyButton
variant="contained"
size="medium"
startIcon={<DeleteIcon />}
endIcon={<SendIcon />}
>
Styled Components
</MyButton>
);
}