Question

我试图将props传递给子组件的样式组件，以便可以动态设置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>
);

Answer 1

我将您的代码放在codesandbox中，并且按预期运行，有2个<Col />，其中一个的大小小于6，另一个大于10，并且正在使用正确的CSS规则根据道具应用。

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

您确定这不是<Card />的CSS中的内容吗？也许您可以发布一个沙盒链接来说明您的问题。

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

1 个答案: