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") {