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

Question

在 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'
  }
}))

我有一些解决方案。

• 在没有内容的情况下添加 if 语句，content:其余内容不会显示。这不是我最喜欢的，因为其余代码仍在加载中。
• 添加 if 语句以在此组件中加载新的 div。这样我就可以定位这个特定的 div 而不是使用伪类before。

标签： emotion-js

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
)