如何：将道具传递到页面定义的样式组件？

Question

所以我遇到了一个问题，即将按钮的背景色动态传递给我定义的样式化组件。如果我按如下所示导入样式化的组件：

import styled from 'styled-components';

const CartQuantityButton = styled.button`
    background: ${props => props.background};
    ...
`;

export default CartQuantityButton;

Mycomponent .js

import CartQuantityButton from './styles/CartQuantityButton';

return (
    <CartItemStyles>
        <Mutation 
            mutation={UPDATE_CART_ITEM_MUTATION} 
            variables={this.state}
        >
            {(updateCartItem, { loading, error }) => {
            return (
                <Form2>
                <table width="100%" border="0" cellPadding="0"> 
                    <tr>
                        <td><CartQuantityButton background={loading ? 'grey' : 'red'} type="submit">Updat{loading ? 'ing' : 'e'}</CartQuantityButton></td>
                    </tr>
                </table>
                </Form2>
            )
            }}
        </Mutation>
  </CartItemStyles>
)

一切正常，背景颜色从红色切换为灰色。但是，如果我将样式化的组件定义为MyComponent.js的一部分，如下所示：

const Form2 = styled.form`
  ...
  button,
  input[type='submit'] {
    background: ${props => props.background};
  }
`;

return (
    <CartItemStyles>
        <Mutation 
            mutation={UPDATE_CART_ITEM_MUTATION} 
            variables={this.state}
        >
            {(updateCartItem, { loading, error }) => {
            return (
                <Form2>
                <table width="100%" border="0" cellPadding="0"> 
                    <tr>
                        <td><button background={loading ? 'grey' : 'red'} type="submit">Updat{loading ? 'ing' : 'e'}</button></td>
                    </tr>
                </table>
                </Form2>
            )
            }}
        </Mutation>
  </CartItemStyles>
)

<button/>的背景色未拾取。我在这里俯瞰什么？