HowTo: Pass props to page defined styled component? - css

Question

So I'm having an issue dynamically passing the background colour of a button to an styled component I have defined. If I import the styled component as follows:
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>
)
everything works as expected, the background colour switches from red to grey. But if I define the styled component as part of MyComponent.js, as follows:
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>
)
the background colour of the <button/> isn't picked up. What am I overlooking here?