emotion: Typing of props in restyled components is broken in latest build

Big changes were made to the typings in the last few releases. I tried to upgrade from 9.1.3 to 9.2.3, where it appears that inference of props types is broken.

  • emotion version: 9.2.3
  • react version: 16.4.0
  • typescript version: 2.9.1

Relevant code.

import styled from 'react-emotion';
import React from 'react';

interface MyProps {
  className?: string;
  someBehavior: boolean;
}

const MyComponent: React.SFC<MyProps> = ({className}) => <div className={className} />

const MyStyledComponent = styled(MyComponent)`
  border: ${props => props.someBehavior ? 1 : 0}px;
`;

Results in this error:

Property 'someBehavior' does not exist on type '{ theme: any; }'.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 28 (22 by maintainers)

Most upvoted comments

@mvestergaard Furthermore, if you use TS >= 2.9, you can extract :MyProps as a type parameter like

const MyStyledComponent = styled(MyComponent)<MyProps>`
  border: ${props => props.someBehavior ? 1 : 0}px;
`;

Please wait, what I said is my mistake. I thought I can resolve both things separately.

@Ailrun your right I will open another issue for this tomorrow because it’s late here