fix: rendering nested child styled components

This commit is contained in:
Mark Lawlor
2022-05-08 22:05:28 +10:00
parent 1c2287b9e0
commit a69f600787

View File

@@ -2,8 +2,6 @@ import { createElement, FunctionComponent, ComponentClass } from "react";
import { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native"; import { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
import { useTailwind } from "./use-tailwind"; import { useTailwind } from "./use-tailwind";
const isStyled = Symbol("styled");
type StyledProps<P> = P & { type StyledProps<P> = P & {
className?: string; className?: string;
tw?: string; tw?: string;
@@ -36,25 +34,17 @@ export function styled<P>(
}`; }`;
} }
Styled[isStyled] = true;
return Styled; return Styled;
} }
type StyledComponentProps<P> = StyledProps<P> & { type StyledComponentProps<P> = StyledProps<P> & {
component: Component<P> & { component: Component<P>;
[isStyled]?: boolean;
};
}; };
export function StyledComponent<P>({ export function StyledComponent<P>({
component, component,
...options ...options
}: StyledComponentProps<P>) { }: StyledComponentProps<P>) {
if (component[isStyled]) { const Component = styled<P>(component);
return component; return <Component {...(options as P)} />;
}
return styled<P>(component)(options as P);
} }
StyledComponent[isStyled] = true;