Fix component type in TS typings (#420)

emotion-js · Oct 19, 2017 · acfd9a5 · acfd9a5
1 parent 71ba95d
commit acfd9a5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/react-emotion/typescript_tests/typescript_tests.tsx b/packages/react-emotion/typescript_tests/typescript_tests.tsx
@@ -66,6 +66,8 @@ const SFCComponent: React.StatelessComponent<SFCComponentProps> = props => (
   <div className={props.className}>{props.children} {props.foo}</div>
 );
 
+declare class MyClassC extends React.Component<CustomProps2> { };
+
 // infer SFCComponentProps
 Component = styled(SFCComponent)({ color: 'red' });
 mount = <Component foo="bar" />;
@@ -74,6 +76,9 @@ mount = <Component foo="bar" />;
 Component = styled(SFCComponent)`color: red`;
 mount = <Component foo="bar" />;
 
+Component = styled(MyClassC) ``;
+mount = <Component customProp="abc" />;
+
 // do not infer SFCComponentProps with pass CustomProps, need to pass both
 Component = styled<CustomProps2 & SFCComponentProps>(SFCComponent)({ 
   color: 'red',

diff --git a/packages/react-emotion/typings/react-emotion.d.ts b/packages/react-emotion/typings/react-emotion.d.ts
@@ -1,4 +1,4 @@
-import { StatelessComponent, Component as ClassComponent, CSSProperties } from 'react'
+import { StatelessComponent, ComponentClass, CSSProperties } from 'react'
 import { Interpolation as EmotionInterpolation } from 'emotion'
 
 export * from 'emotion'
@@ -21,7 +21,7 @@ export interface Options {
 }
 
 type Component<Props> =
-  | ClassComponent<Props>
+  | ComponentClass<Props>
   | StatelessComponent<Props>
 
 export type ThemedProps<Props, Theme> = Props & {
@@ -30,7 +30,7 @@ export type ThemedProps<Props, Theme> = Props & {
 
 export interface StyledComponent<Props, Theme, IntrinsicProps>
   extends
-    ClassComponent<Props & IntrinsicProps>,
+    ComponentClass<Props & IntrinsicProps>,
     StatelessComponent<Props & IntrinsicProps>
 {
   withComponent<Tag extends keyof JSX.IntrinsicElements>(tag: Tag):