javascript - スタイル付きコンポーネントで ${props => props.myProp} を回避するには?

Question

styled-components${props => props.myProp}への書き込みを避けるにはどうすればよいでしょうか?

たとえば、ボタンのスタイルを設定する場合:

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};
`}`;

しかし、これは単に${props.color}.

では、これを行うにはどうすればよいでしょうか。