сделать многие стилизованные свойства компонентов зависимыми от проп

Question

Мне нравится, что вы можете делать

color: ${p=>p.active ? 'red' : 'green'}

, но этот синтаксис выходит из-под контроля для более чем одного свойства за раз

${
  p => p.active ? (
    `
      color: ${p.theme.red};
      text-decoration: underline;
    `
  ):(
  ``
  )
}

по сравнению с гораздо более приятным синтаксисомдля имен классов

&.active{
 color: ${p => p.theme.red}
 text-decoration: underline;
}

Однако условная установка классов гораздо менее изящна, чем просто установка реквизита для компонента.Есть ли лучший способ сделать это, который имеет преимущества обоих?Что-то вроде

&${p=>p.active}{
  color: ${p.theme.red}
  text-decoration: underline;
}

Answer 1

Вы можете определить активный CSS как отдельный фрагмент, например,

import styled, { css } from "styled-components";

const activeCss = css`
  color: ${p => p.theme.red};
  text-decoration: underline;
`;

const Link = styled.a`
  color:#000;
  ${ p => p.active && activeCSS }
`;