使用样式化组件中的道具来更改样式*名称*（非值）

Question

样式化的组件可让您在CSS中使用道具，例如：

styled.whatever`
margin: ${props => props.bigMargin ? '20px' : '5px'}
`;

但是，我只是尝试使用 name 风格的道具：

styled.whatever`
margin-${props => props.leftmargin ? 'left' : 'right'}: 10px;
`;

当我这样做时，在Chrome调试器中看起来像这样：

margin-right: ;
: 1em;

是否无法使用道具更改样式名称，或者我只是以某种方式做错了？

Answer 1

使它起作用的唯一方法是将名称​​和都放入props控制的部分：

${({ leftmargin }) =>
leftmargin ? `margin-left: 1em` : `margin-right: 1em`}};

这可行，但是如果有人有更好的答案（“ DRY-er”答案），我会很乐意接受。