Question

我正在尝试使用某些内联样式（尤其是css道具）来覆盖Emotion styled component的基本样式。但是，内联样式无法使用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生成的类捆绑在一起？

Answer 1

As described in the Emotion docs，for (int sub_string_size = 0; sub_string_size < number_of_test_cases; sub_string_size++) { string sub = x.substr(0, sub_string_size);道具需要的工作比仅包含它还要多。有几种不同的处理方法，但一种方法是包括JSX编译指示，以告知编译的css使用情感函数而不是React的默认函数。

我用示例https://codesandbox.io/s/emotion-playground-forked-kyhz4

分叉了您的Codesandbox。

在Emotion中使用`css`属性覆盖样式化的组件

1 个答案: