CODEWITHSUNDEEP
cssreactjsnext.jsmaterial-ui
Milan Poudel
Milan Poudel

Reputation: 792

I want to style the Button Component with some properties but I see I can't use classname in updated MUI5

import { styled } from "@mui/system";
import DeleteIcon from "@mui/icons-material/Delete";
import SendIcon from "@mui/icons-material/Send";
import { Button } from "@mui/material";

const Button = styled("button")({
  color: "red",
  backgroundColor: "black",
  padding: "1rem",
});

function App() {
  return (
    <div>
      <Button
        variant="contained"
        size="medium"
        startIcon={<DeleteIcon />}
        endIcon={<SendIcon />}
      >
        Material UI
      </Button>
    </div>
  );
}

export default App;

I think styled is now a new way in MUI to create make and use custom styles. I don't think I can use className property in this case. Previously I could use makeStyles and useStyles and assign classname to the Button component to customize it, How can I use Button Component from MUI and customize it using styled . Right now I should define at the top what kind of component is. I want to use Button component, its variant color properties and also customize it using styled.

Upvotes: 1

Views: 3432

Answers (4)

molecule
molecule

Reputation: 140

I see a couple of problems here:

  1. you need to make sure that you import as follows:
import { styled } from '@mui/material/styles';

https://mui.com/material-ui/migration/migrating-from-jss/

  1. since you want to customize the mui, pass the Button to styled and rename the component
const CustomButton = styled(Button)({
  color: "red",
  backgroundColor: "black",
  padding: "1rem",
});

Then you can use it

function App() {
  return (
      <CustomButton
        variant="contained"
        size="medium"
        startIcon={<DeleteIcon />}
        endIcon={<SendIcon />}
      >
        Material UI
      </CustomButton>
  );
}

Upvotes: 2

Samira
Samira

Reputation: 2733

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

Upvotes: 0

lamsal
lamsal

Reputation: 334

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>

Upvotes: 1

Manfre
Manfre

Reputation: 696

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>

Upvotes: 0

Related Questions