Using styled components with Typescript, prop does not exist?

by
  • The styled component will have to specify the prop to pass to the component like styled("h2")<IProps>. You can read more about the pattern from documentation
  • css is not required here, it is added as a helper when you need to actually return CSS from a function. Check out conditional rendering.

Taking these into account, the component becomes:

const HeadingStyled = styled("h2")<{emphasized: boolean}>`
  ${props => props.emphasized && `
    display: inline;
    padding-top: 10px;
    padding-right: 30px;
  `}
`;

A use-case for css

Leave a Comment