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

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

0 голосов
/ 12 октября 2019 
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 })
)

Ответы [ 2 ]

0 голосов
/ 15 ноября 2019

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

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

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

const Container = styled.div(({ color }) =>`
  color: ${color};
`)
0 голосов
/ 12 октября 2019

Это плохой пример, который вы скопировали из документации, что на самом деле приводит к записи 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} />
...