Итак, у меня проблема с динамической передачей цвета фона кнопки в стилизованный компонент, который я определил. Если я импортирую стилизованный компонент следующим образом:
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/>
не подобран. Что я здесь пропускаю?