How to override material-ui css with styled component?

Question

I'm still a beginner with the ui-material. And I would like to custom my own Button Component with styled-component.

The problem is to override the css according to the button variations, for example if it is primary or secondary:

import React from "react";
import PropTypes from "prop-types";

import { CButton } from "./styles";

const CustomButton = ({ children, color }) => {
  return (
    <div>
      <CButton variant="contained" color={color}>
        {children}
      </CButton>
    </div>
  );
};

CustomButton.propTypes = {
  children: PropTypes.node,
  color: PropTypes.oneOf(["primary", "secondary"])
};

export default CustomButton;

import styled, { css } from "styled-components";
import Button from "@material-ui/core/Button";

export const CButton = styled(Button)`
  height: 80px;

  ${({ color }) =>
    color === "primary"
      ? css`
          background-color: green;
        `
      : color === "secondary" &&
        css`
          background-color: yellow;
        `}
`;

import React from "react";

import CustomButton from "./CustomButton";

const App = () => {
  return (
    <div>
      <div
        style={{
          marginBottom: "10px"
        }}
      >
        <CustomButton color="primary">Primary</CustomButton>
      </div>
      <div>
        <CustomButton color="secondary">Secondary</CustomButton>
      </div>
    </div>
  );
};

export default App;

Could you tell me how I can get my styling to override the ui-material?

Thank you in advance.

It's unhelpful having snippets that don't run. Can you create a codesandbox that runs? — Chris Farmer
– Chris Farmer, Commented Jul 4, 2021 at 20:37
@Tainara here is a working [codesandbox.io/s/material-ui-with-styled-components-e9fr5?file=/… of the way you're trying to create a custom component. You need to increase the specificity to make the styles working with material ui components. As Chris mentioned, there is a nice example of the [material-ui.com/guides/interoperability/… UI website. — Junaid Faryad
– Junaid Faryad, Commented Jul 4, 2021 at 21:04
Material UI docs have some examples on how to customize the components using different approaches. — Junaid Faryad
– Junaid Faryad, Commented Jul 4, 2021 at 21:07

Chris Farmer · Accepted Answer · 2021-07-04 20:58:54Z

6

It looks like there's a nice example on how to do this in the material-ui docs: https://material-ui.com/guides/interoperability/#styled-components

One thing you seem to be missing is the StylesProvider, which allows your styles to override the default material styles. This seems to work... I don't deal with the conditional in your example, but I don't think that's part of your problem here.

const MyStyledButton = styled(Button)`
  background-color: red;
  color: white;
`;

export default function App() {
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <MyStyledButton color="primary">Foo</MyStyledButton>
      </div>
    </StylesProvider>
  );
}

Here's a codesandbox: https://codesandbox.io/s/infallible-khorana-gnejy

answered Jul 4, 2021 at 20:58

Chris Farmer

25.5k37 gold badges125 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tainara Over a year ago

Hey Chris, thank you, but how should I handle variations? How primary and secondary?

Shariati Over a year ago

import { StyledEngineProvider } from '@mui/material' for latest version of material ui

Collectives™ on Stack Overflow

How to override material-ui css with styled component?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related