Passing prop values to custom styled component

Question

I just started using styled component and having some issues in setting props values for a custom component. I have a card component which looks like this

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

Now I have converted this component to a styledComponent like this

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;
  }
`;

As its clear from the code, I am having issues in passing the prop values (size and disableCardClick) to the custom Card Component. I am actually not even sure if attrs is the correct way to set the props value. I want to set that value of size and disableCardClick in the styled component StyledCard. How can I achieve that? Also "data-test-id" is giving me error that ; expected.

Answer 1

You can easily pass props to custom styled component like this:

<StyledCard size="none" disableCardClick />

styled component will automatically pass your props to the child component