Using styled components with Typescript, prop does not exist?

Question

Here is my styled component.

import * as React from 'react'; import styled from 'styled-components'; import { ComponentChildren } from 'app-types';  interface Props {     children: ComponentChildren;     emphasized: boolean; }  const HeadingStyled = styled.h2`     ${props => props.emphasized && css`         display: inline;         padding-top: 10px;         padding-right: 30px;   `} `;  const Heading = (props: Props) => (     <HeadingStyled>         {props.children}     </HeadingStyled> );  export default Heading; 

I get warnings that:

• Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any>'.
• Cannot find name 'css'. Did you mean 'CSS'?

How can I get this to work?

Answer 1

• 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