title: How to override a React component's CSS using emotion CSS?
body: <p>In the below example, how to apply <code>background-color:green</code> to the <code>&lt;Test/&gt;</code> component without having to edit the <code>&lt;Test/&gt;</code> component directly?</p>
  
  <pre><code>/** @jsx jsx */
  import { css, jsx } from "@emotion/core";
  import React from "react";
  
  
  function Test() {
      return (
          &lt;div
              css={css`
                  height: 100px;
                  width: 100px;
                  background-color: aqua;
              `}
          &gt;
              Text
          &lt;/div&gt;
      );
  }
  
  function App() {
      return (
          &lt;Test
              css={css`
                  height: 400px;
                  width: 400px;
                  background-color: green;
              `}
          /&gt;
      );
  }
  </code></pre>