Блог

Каков наилучший способ вывода блока кода для стилизованного объекта в 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
  'amp;::before': {
    content: `''`,
    position: 'absolute',
    left: '0%',
    top: '0%',
    width: '100%',
    height: '100%',
    background: 'blue'
  }
}))
 

У меня есть несколько решений.

• Добавьте оператор if в content: as без содержимого, остальное не будет отображаться. Это не мой любимый, потому что остальная часть кода все еще загружается.
• Добавьте оператор if для загрузки нового div внутри этого компонента. Таким образом, я могу настроить таргетинг на этот конкретный div вместо использования псевдокласса before .

Я немного подумал и пришел к этому решению:

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