如何在使用道具的样式化组件中使用变量值？

Question

我将从我的反应组件中选择一个名为的道具传递给我想要在其中执行以下操作的样式化组件：

import styled from 'styled-components';
import {colors} from '../common/colors';

const StyledComponent = styled.div`
 background-color: ${props => props.selected ? '${colors.gray}' : ''}
`;

export {StyledComponent};

但是样式化的组件并没有将 ${colors.gray} 作为一个变量，并且仍然将它视为一个常规字符串。有谁知道如何实现这一目标？提前致谢。

Answer 1

呃。这真的很容易。我只需要删除封闭的撇号并像使用它一样使用它 background-color: ${props => props.selected ? colors.gray : ''}.