Как получить реквизит от другого компонента в styled-components

Question

Я пытаюсь передать реквизиты в стилизованные компоненты дочернего компонента, чтобы я мог динамически устанавливать стиль CSS. Ниже я попробовал, но всегда ложно, что составляет 50%. Похоже, реквизит не передается.

компоненты / Col.js

const Col = styled.div`
  flex: ${props => (props.size < 6 ? "0 0 100%" : "0 0 50%")};
  max-width: ${props => (props.size < 6 ? "100%" : "50%")};
`;

export default ({ children }) => <Col>{children}</Col>;

страниц / index.js

export default () => (
  <App>
    <Header />
    <Row>
      <Col size={3}>
        <Card />
      </Col>
    </Row>
  </App>
);

Answer 1

Я поместил ваш код в codesandbox , и он функционирует, как и ожидалось, есть 2 <Col /> s, один из которых имеет размер меньше 6, а другой больше, и в настоящее время применяются правильные правила CSSприменяется на основе реквизита.

https://codesandbox.io/s/epicpoincaresd6ig-sd6ig

Вы уверены, что это не что-то в CSS <Card />?Может быть, вы можете опубликовать ссылку в песочнице, демонстрирующую вашу проблему.