Как: Передать реквизит компоненту, определенному в стиле?

71
7

Поэтому у меня возникла проблема с динамической передачей цвета фона кнопки стилизованному компоненту, который я определил. Если я импортирую стилизованный компонент следующим образом:

import styled from 'styled-components';

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

export default CartQuantityButton;

Мой компонент .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/> не выбран. Что я здесь пропускаю?

спросил(а) 2019-01-15T13:56:00+03:00 1 год, 9 месяцев назад
0
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема