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>
  );
}

enter image description here