1

我正在尝试使用一些内联样式（特别是道具）覆盖Emotion 样式组件的基本样式。css但是，内联样式不使用css道具应用，我发现唯一可行的方法是使用styles道具。

这是一个基本示例：

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 生成的类捆绑在一起？

4

1 回答 1

0

如 Emotion docs中所述，css道具需要比仅仅包含它更多的工作。有几种不同的方法可以使用它，但一种方法是包含 JSX pragma 来告诉编译jsx器使用情感函数而不是 React 的默认函数。

我已经用一个例子分叉了你的 Codesandbox：https ://codesandbox.io/s/emotion-playground-forked-kyhz4

于 2020-11-30T16:56:34.620 回答