将道具值传递给自定义样式的组件

Question

我刚开始使用样式化组件，在为自定义组件设置道具值时遇到了一些问题。我有一个看起来像这样的卡片组件

<Card className="card" size="none" disableCardClick />

现在我已经将这个组件转换成这样的 styledComponent

const StyledCard = styled(Card).attrs(props => {
  size="none"
  disableCardClick
  data-test-id="wc-ftu-redesign-card"
})`
  height: 100%;
  max-width: 927px;

  @media (min-width: 810px) {
    max-width: 529px;
  }

  @media (max-width: 810px) {
    max-height: 600px;
  }

  @media (max-width: 650px) {
    max-height: 750px;
  }

  @media (max-width: 550px) {
    overflow-y: scroll;
  }
`;

从代码中可以清楚地看出，我在将道具值（大小和 disableCardClick）传递给自定义卡片组件时遇到了问题。我什至不确定 attrs 是否是设置道具值的正确方法。我想在样式组件 StyledCard 中设置 size 和 disableCardClick 的值。我怎样才能做到这一点？另外，“data-test-id”给我的错误是 ; expected.

Answer 1

您可以像这样轻松地将道具传递给自定义样式的组件：

<StyledCard size="none" disableCardClick />

styled 组件会自动将你的 props 传递给子组件

将道具值传递给自定义样式的组件

Passing prop values to custom styled component

javascript

reactjs

styled-components