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:

Here's my code into codesandbox.io

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.

Answer 1

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