Создать переменную из реквизита и повторно использовать в блоке кода с Styled Components?

Question

У меня есть работающий элемент базового стиля. Когда пропеллер isHere пройден, тогда фон blue.

const Item = styled.ul`
  ${props => console.log(props.theme.colorGroupSelected)};
  ${props => (props.isHere ? `background:` + 'blue' : null)};
`;

Вместо blue Мне нужно использовать цвет colorGroupSelected из моей темы, но я не могу заставить его работать, я продолжаю получать синтаксическую ошибку.

    const Item = styled.ul`
      ${props => (props.isHere ? `background:` + props => props.theme.colorGroupSelected : null)};
    `;

Мой код становится довольно трудно читать. Можно ли деструктурировать переменную внутри стилизованного блока? Примерно так:

 ${const colorGroupSelected = (props => return props.theme.colorGroupSelected)};

 ${props => (props.isHere ? `background:` + colorGroupSelected : null)};

Answer 1

Это работает, но не разрушает переменную:

 ${props => (props.isHere ? `background:` + props.theme.colorGroupSelected : null)};