title: emotion use css prop with custom components
body: <p>In my application I have a component that I want to style with the css prop from outside.</p>
  <pre><code>function Component({css}:{css?: React.CSSProperties}) {
    // some stuff going on here
    return (
      &lt;div
        css={{
          color: blue,
          ...css
        }}
      &gt;
         // some stuff going on here
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>The background is as follows:
  I want to use <code>Component</code> in different scenarios where I have to style the container based on the surrounding layout. E.g. flex, grid or in combination with some components I have to add different margins.</p>
  <p>Now instead of introducing many props for all possible scenarios, I want to be able to style the container from outside the component.</p>
  <p>E.g. usages of the component could be:</p>
  <pre><code>function Layout() {
    return (
      // some other components
      &lt;Component css={{margin: 12}}/&gt;
      // some other components
    )
  }
  </code></pre>
  <p>or</p>
  <pre><code>import {css} from &quot;@emotion/react&quot;
  
  const style = css({margin: 12})
  
  function Layout() {
    return (
      // some other components
      &lt;Component css={style}/&gt;
      // some other components
    )
  }
  </code></pre>
  <p>or</p>
  <pre><code>import {css} from &quot;@emotion/react&quot;
  
  const style1 = css({margin: 12})
  const style2 = css({color: 'red'})
  
  function Layout() {
    return (
      // some other components
      &lt;Component css={[style1, style2]}/&gt;
      // some other components
    )
  }
  </code></pre>
  <p>I have the following problems:</p>
  <ol>
  <li>If I use css as the prop name (as in the above example) the style is not applied. If I change the name of the prop to e.g. <code>newCss</code> it works as expected</li>
  <li><code>React.CSSProperties</code> is not the right prop type to handle all the possibilities of emotions css prop.</li>
  <li>How can I merge the different css prop possibilities (object, list) with the css prop from <code>Component</code>?</li>
  </ol>