Emotion.js Как использовать динамический стиль в стиле объекта?

Question

import styled from '@emotion/styled'
import { css } from '@emotion/core'

const dynamicStyle = props =>
  css`
    color: ${props.color};
  `

const Container = styled.div`
  ${dynamicStyle};
`
render(
  <Container color="lightgreen">
    This is lightgreen.
  </Container>
)

Как сделать Container со стилем объекта следующим образом?

const H1 = styled.h1(
  {
    fontSize: 20
  },
  props => ({ color: props.color })
)

Answer 1

Добавляя к ответу @ coreyward, вы также можете использовать гораздо более читабельный подход и сделать что-то вроде следующего -

const Container = styled.div(props =>`
  color: ${props.color};
`)

Аналогично, вы можете уничтожить props -

const Container = styled.div(({ color }) =>`
  color: ${color};
`)

Answer 2

Это плохой пример, который вы скопировали из документации, что на самом деле приводит к записи color реквизита в Div контейнера, но по сути вы должны сделать что-то вроде этого:

import styled from '@emotion/styled'
import { css } from '@emotion/core'

const dynamicStyle = props => ({ color: props.color })

const Container = styled.div`
  ${dynamicStyle};
`
render(
  <Container color="lightgreen">
    This is lightgreen.
  </Container>
)

Я бы рекомендовал подход, подобный этому, ради здравомыслия и во избежание передачи вам реквизита. Реактивные элементы:

const Container = styled.div`
  color: ${props => props.color};
`

// or...

const Container = ({ color, ...props }) => <div css={{ color }} {...props} />