how do i get styled-components to work with material-ui-CodePudding

import styled from "styled-components";
import Button from "@material-ui/core/Button";
 
export const StyledButton = styled(Button)`
  margin: 20px;
`;

Im trying to eddit the button but it does not respond.how do i give the button the margin?

CodePudding user response：

You would need to override the values for Material UI.

Styled Components recommends adding ampersands as stated here: (which you should follow) https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity

import styled from "styled-components";
import Button from "@material-ui/core/Button";
 
export const StyledButton = styled(Button)`
  &&& {
       margin: 20px;
     }
`;

Another way to do that (which i often use) is to simply add !important next to your code. So it would be something like:

margin: 20px !important;

CodePudding user response：

import styled from "styled-components";
import Button from "@material-ui/core/Button";
 
export const StyledButton = styled(Button)`
  && {
       margin: 20px;
     }
`;

Try it like this this guy explanes how you can use it in multiple ways

https://www.sipios.com/blog-tech/how-to-use-styled-components-with-material-ui-in-a-react-app