Как: Передать реквизит компоненту, определенному в стиле страницы? - PullRequest
0 голосов
/ 15 января 2019

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...