How to set up styled component props type so the styled component can take more than one prop?

Viewed 20

Let's say I have the following component with 1 prop - title:

<StyledBaseButton title="test" />

I would add the prop type like this:

const StyledBaseButton = styled(BaseButton)<{ title: string }>`
    background-color: ${colors.primary600};
    border-color: ${colors.primary600};
`;

However, if I want to add a second prop like this:

<StyledBaseButton title="test" wide />

And attempt to add the second prop to the styled component like this:

const StyledBaseButton = styled(BaseButton)<{ title: string, wide: boolean }>`
    background-color: ${colors.primary600};
    border-color: ${colors.primary600};
`;

It doesn't work and I imagine I'm messing up the styled component syntax. I tried google-ing the issue, but all the solutions always show how to do it with 1 prop only, and I can already do that. What I can't figure out is how to use more than one props.

0 Answers
Related