diff --git a/src/styled-component.tsx b/src/styled-component.tsx index 2dacc3d..a454724 100644 --- a/src/styled-component.tsx +++ b/src/styled-component.tsx @@ -1,3 +1,4 @@ +import * as React from "react"; import { styled } from "./styled"; import { Component, StyledProps } from "./utils/styled"; diff --git a/src/styled.tsx b/src/styled.tsx index c472fae..07c48c0 100644 --- a/src/styled.tsx +++ b/src/styled.tsx @@ -1,5 +1,4 @@ -import * as React from "react"; - +import { ComponentProps, createElement, FC } from "react"; import { Component, StyledProps, StyledPropsWithKeys } from "./utils/styled"; import { ComponentContext } from "./context/component"; import { useInteraction } from "./use-interaction"; @@ -19,14 +18,14 @@ export interface StyledOptions

{ export function styled( Component: Component, options?: { props?: undefined; spreadProps?: undefined } -): React.FC>; +): FC>; /** * With either props or valueProps */ export function styled( Component: Component, options: { props?: Array; spreadProps?: Array; cssProps?: Array } -): React.FC>; +): FC>; /** * Actual implementation */ @@ -71,7 +70,7 @@ export function styled( }) : componentChildren; - const element = React.createElement(Component, { + const element = createElement(Component, { ...handlers, ...styledProps, children, @@ -79,12 +78,13 @@ export function styled( return !isComponent ? element - : React.createElement< - React.ComponentProps - >(ComponentContext.Provider, { - children: element, - value: { hover, focus, active }, - }); + : createElement>( + ComponentContext.Provider, + { + children: element, + value: { hover, focus, active }, + } + ); } if (typeof Component !== "string") {