使用 Styled Components 从 props 创建变量并在代码块中重用？

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)};

使用 Styled Components 从 props 创建变量并在代码块中重用？

Create variable from props and reuse in code block with Styled Components?

styled-components