如何从样式组件中的另一个组件获取道具答案

【问题标题】：How to get props from another component in styled-components如何从样式组件中的另一个组件获取道具
【发布时间】：2019-05-16 00:43:27
【问题描述】：

我正在尝试将道具传递给子组件的样式组件，以便我可以动态设置 CSS 样式。以下是我尝试过的，但它总是出错，即 50%。好像道具没有传下来。

components/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>;

pages/index.js

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

【问题讨论】：

标签： styled-components

【解决方案1】：

我将您的代码放在codesandbox 中，它按预期运行，有 2 个<Col />s，一个小于 6，一个大于一个，并且正在根据 props 应用正确的 CSS 规则.

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

你确定这不是 <Card /> 的 CSS 中的东西吗？也许您可以发布一个沙盒链接来展示您的问题。

【讨论】：