Переопределение style-компонентов с помощью css в Emotion - PullRequest
Новая
       76

Переопределение style-компонентов с помощью css в Emotion

0 голосов
/ 25 января 2020

Я пытаюсь переопределить базовые стили компонента в стиле Emotion с некоторыми встроенными стилями - в частности, css prop. Однако встроенные стили не применяются с помощью css prop, и единственный метод, который я нашел для работы, это использование styles prop.

Вот базовый c пример: 

const Content = styled.div`
  background-color: lightgray;
  padding: 50px;
  margin: 0 0 20px 0;
`
// 50px of padding
<Content>
  Hello CodeSandbox
</Content>

// 50px of padding
<Content css={css`padding: 20px;`}>
  With Override
</Content>

// 50px of padding
<Content css={{ padding: '20px' }}>
  With Override
</Content>

// 20px of padding, but with an inline style
<Content style={{ 'padding': '20px' }}>
  With Override
</Content>

А вот рабочий CodeSandbox

Как переопределить стили стилизованного компонента так встроенный стиль связан с сгенерированным классом из Emotion?

...