styled-components - 从道具创建变量并使用样式化组件在代码块中重用？

Question

我有一个基本样式的组件工作。当 propisHere被传递时，背景是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)};

标签： styled-components

Answer 1

这有效，但不会破坏变量：

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