如何检查道具以在 Emotion 中的样式对象上输出代码块

Question

在 styled object in Emotion 上输出代码块的最佳做法是什么？

一个简单的布尔语句如下所示：

const StyledComponent = styled('div')(({ check }) => ({
    position: check ? 'relative' : undefined
})

但是，如果我不想检查每一行代码，那么对于像下面示例这样的代码块，最好的解决方案是什么？

const StyledComponent = styled('div')(({ check }) => ({
  // some style here
  // ...

  // only load pseud element if "check" is true
  '&::before': {
    content: `''`,
    position: 'absolute',
    left: '0%',
    top: '0%',
    width: '100%',
    height: '100%',
    background: 'blue'
  }
}))

我有一些解决方案。

在 content: 上添加 if 语句，因为没有内容，其余部分将不会显示。这不是我最喜欢的，因为其余代码仍在加载。
添加 if 语句以在该组件中加载新的 div。这样我就可以针对这个特定的 div 而不是使用伪 class before.

Answer 1

我想了想，找到了这个解决方案：

const StyledComponent = styled('div')(
  {
    // some style here
    position: 'relative'
  },
  
  ({ check }) =>
    // only load pseudo element if "check" is true
    check
      ? {
          '&::before': {
            content: `''`,
            position: 'absolute',
            left: '0%',
            top: '0%',
            width: '100%',
            height: '100%'
          }
        }
      : undefined
)

如何检查道具以在 Emotion 中的样式对象上输出代码块

How to check a prop to output a block of code on a styled object in Emotion

emotion-js