title: Overriding styled-components with `css` prop in Emotion
body: <p>I'm trying to override the base styles of an <a href="https://emotion.sh/docs/styled" rel="nofollow noreferrer">Emotion styled component</a> with some inline styles - specifically a <code>css</code> prop. The inline styles are not applied using the <code>css</code> prop however, and the only method I've found to work is using a <code>styles</code> prop. </p>
  
  <p>Here's a basic example:</p>
  
  <pre><code>const Content = styled.div`
    background-color: lightgray;
    padding: 50px;
    margin: 0 0 20px 0;
  `
  // 50px of padding
  &lt;Content&gt;
    Hello CodeSandbox
  &lt;/Content&gt;
  
  // 50px of padding
  &lt;Content css={css`padding: 20px;`}&gt;
    With Override
  &lt;/Content&gt;
  
  // 50px of padding
  &lt;Content css={{ padding: '20px' }}&gt;
    With Override
  &lt;/Content&gt;
  
  // 20px of padding, but with an inline style
  &lt;Content style={{ 'padding': '20px' }}&gt;
    With Override
  &lt;/Content&gt;
  </code></pre>
  
  <p>And here's a working <a href="https://codesandbox.io/s/emotion-playground-5o66x" rel="nofollow noreferrer">CodeSandbox</a></p>
  
  <p>How do we override the styles of a styled component so the inline style is bundled with the generated class from Emotion?</p>