我们如何避免${props => props.myProp}
在styled-components中编写?
例如,如果我们正在设计一个按钮:
const Button = styled.button`
background: ${props => props.background};
color: ${props => props.color};
`;
render(
<div>
<Button
background="red"
color="white"
>
Example 1
</Button>
<Button
background="black"
color="yellow"
>
Example 2
</Button>
</div>
);
在此处和此处的文档中,我们需要编写类似${props => props.myProp}
. 但这看起来很烦人且不必要。如果我们可以只写${props.myProp}
.
我目前的解决方法是编写如下内容:
const Button = styled.button`${props => `
background: ${props.background};
color: ${props.color};
`}`;
但这并不像使用 just 那样简单明了${props.color}
。
那么,我们该怎么做呢?