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

Question

我要将从我的react组件中选择的一个命名道具传递给样式组件，在其中要执行以下操作：

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

Du。真的很简单。我只需要删除封闭的撇号并像 background-color: ${props => props.selected ? colors.gray : ''}。