Override material-ui button styles with styled-components

user_6393309 0
Viewed 7186

I am using a material-ui button and trying to override the border-radius (i.e, make it 0) through styled-components. However, it's not working.

Code:

import React from "react";
import styled from "styled-components";
import { Button } from "@material-ui/core";

const StyledButton = styled(Button)`
  background-color: #d29d12;
  border-radius: 0;
`;

export default function App() {
  return <StyledButton>Hello</StyledButton>;
}
material-ui styled-components reactjs css html
5 Answers

By default, Material-UI injects it styles at the end of the <head> element. This means that its styles will come after styles generated by styled-components and thus the Material-UI styles will win over the styled-components styles when CSS specificity is the same.

You can use the StylesProvider component with the injectFirst property to move the Material-UI styles to the beginning of the <head> and then the styled-components styles will come after it and win.

import React from "react";
import styled from "styled-components";
import Button from "@material-ui/core/Button";
import { StylesProvider } from "@material-ui/core/styles";

const StyledButton = styled(Button)`
  background-color: red;
  border-radius: 0;
`;

export default function App() {
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <StyledButton>Hello</StyledButton>
      </div>
    </StylesProvider>
  );
}

Edit styled-components

Related answers:

user_74959300
user_96448270

By adding className to StyledButton, it can override MUI button style,

<StyledButton className={'myclassName'}>Hello</styledButton>

const StyledButton = styled(Button)`
 &.myclassName {
    background-color: red,
    border-radius: 0
  }
`;
user_109885400 

const StyledButton = styled(Button)({
  '&&&': {
    backgroundColor: red,
    borderRadius: 0
  }
)}

user_82184370

You can override the default border-radius of button by applying !important to your styled component.

const StyledButton = styled(Button)`
  borderRadius: 0px !important;
`;
user_51646200
Related