Using styled components with Typescript, prop does not exist?

• 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

The previous answer worked for me, but just to add some information that was also helpful in my case:

StyledComponents uses a "ThemedStyledFunction" interface that allows the user to define additional Prop Types.

That means you could create an interface like:

interface IHeadingStyled {   emphasized: boolean;}

And use it on the component:

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

(Which is a cleaner way to implement what @BoyWithSilverWings suggested, in case you have multiple props)

Check this discussion for more complete information:

https://github.com/styled-components/styled-components/issues/1428#issuecomment-358621605

When using styled components in a diferent sheet, I was having the same error.

I had to do this in index.tsx:

 export interface RadioBoxProps {    isActive: boolean;}

Then, in the styling sheet:

 import { RadioBoxProps } from "./index";export const RadioBox = styled.button<RadioBoxProps>`background: ${(props) => props.isActive ? '#eee' : 'transparent'};`

In the tutorial I was watching, the person passes without exporting the interface and importing in the styling sheet. For him, it was working just fine. However, for me I wasn't and just worked when I did what I shown above.