title: How to override material-ui css with styled component?
body: <p>I'm still a beginner with the ui-material. And I would like to custom my own Button Component with <code>styled-component</code>.</p>
  <p>The problem is to override the css according to the button variations, for example if it is <code>primary</code> or <code>secondary</code>:</p>
  <p>Here's my code into <a href="https://codesandbox.io/s/stoic-cdn-whznl?file=/src/index.js" rel="nofollow noreferrer">codesandbox.io</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import PropTypes from "prop-types";
  
  import { CButton } from "./styles";
  
  const CustomButton = ({ children, color }) =&gt; {
    return (
      &lt;div&gt;
        &lt;CButton variant="contained" color={color}&gt;
          {children}
        &lt;/CButton&gt;
      &lt;/div&gt;
    );
  };
  
  CustomButton.propTypes = {
    children: PropTypes.node,
    color: PropTypes.oneOf(["primary", "secondary"])
  };
  
  export default CustomButton;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>import styled, { css } from "styled-components";
  import Button from "@material-ui/core/Button";
  
  export const CButton = styled(Button)`
    height: 80px;
  
    ${({ color }) =&gt;
      color === "primary"
        ? css`
            background-color: green;
          `
        : color === "secondary" &amp;&amp;
          css`
            background-color: yellow;
          `}
  `;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  
  import CustomButton from "./CustomButton";
  
  const App = () =&gt; {
    return (
      &lt;div&gt;
        &lt;div
          style={{
            marginBottom: "10px"
          }}
        &gt;
          &lt;CustomButton color="primary"&gt;Primary&lt;/CustomButton&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;CustomButton color="secondary"&gt;Secondary&lt;/CustomButton&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/YUsQf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YUsQf.png" alt="enter image description here" /></a></p>
  <p>Could you tell me how I can get my styling to override the ui-material?</p>
  <p>Thank you in advance.</p>