title: Emotion.js How to use dynamic style in object style?
body: <pre><code>import styled from '@emotion/styled'
  import { css } from '@emotion/core'
  
  const dynamicStyle = props =&gt;
    css`
      color: ${props.color};
    `
  
  const Container = styled.div`
    ${dynamicStyle};
  `
  render(
    &lt;Container color="lightgreen"&gt;
      This is lightgreen.
    &lt;/Container&gt;
  )
  </code></pre>
  
  <p>How do I make <code>Container</code> with the object style as following?</p>
  
  <pre><code>const H1 = styled.h1(
    {
      fontSize: 20
    },
    props =&gt; ({ color: props.color })
  )
  </code></pre>