diff --git a/__tests__/styled/props.tsx b/__tests__/styled/props.tsx
index d434463..55f00fb 100644
--- a/__tests__/styled/props.tsx
+++ b/__tests__/styled/props.tsx
@@ -56,10 +56,7 @@ describe("Styled - Values Props", () => {
});
describe("Styled - Base Class Name", () => {
- const StyledView = styled(View);
- StyledView.defaultProps = {
- baseClassName: "flex-row",
- };
+ const StyledView = styled(View, "flex-row");
test("can set base classNames", () => {
const tree = render(
@@ -83,10 +80,9 @@ describe("Styled - Base Class Name", () => {
});
describe("Styled - Default props", () => {
- const StyledText = styled(Text);
+ const StyledText = styled(Text, "p-4");
StyledText.defaultProps = {
accessibilityRole: "header",
- baseClassName: "p-4",
};
test("can render with default props", () => {
diff --git a/src/styled.tsx b/src/styled.tsx
index a67e25e..b321c35 100644
--- a/src/styled.tsx
+++ b/src/styled.tsx
@@ -24,7 +24,7 @@ export interface StyledOptions
{
props?: Array;
spreadProps?: Array;
classProps?: Array;
- supportsClassName?: boolean;
+ baseClassName?: string;
}
type ForwardRef = ForwardRefExoticComponent<
@@ -36,15 +36,35 @@ type InferRef = T extends RefAttributes | ClassAttributes
: unknown;
/**
- * Normal usage
+ * Default
*/
export function styled(
- Component: ComponentType,
- options?: StyledOptions & { props?: undefined; spreadProps?: undefined }
+ Component: ComponentType
): ForwardRef, StyledProps>;
/**
- * With either props or valueProps
+ * Base className
+ */
+export function styled(
+ Component: ComponentType,
+ baseClassName: string
+): ForwardRef, StyledProps>;
+
+/**
+ * Base className w/ options
+ */
+export function styled(
+ Component: ComponentType,
+ baseClassName: string,
+ options: StyledOptions & {
+ props?: Array;
+ spreadProps?: Array;
+ classProps?: Array;
+ }
+): ForwardRef, StyledPropsWithKeys>;
+
+/**
+ * Only options
*/
export function styled(
Component: ComponentType,
@@ -62,18 +82,26 @@ export function styled<
T extends { style?: StyleProp; children?: ReactNode | undefined }
>(
Component: ComponentType,
- {
+ styledBaseClassNameOrOptions?: string | StyledOptions,
+ maybeOptions: StyledOptions = {}
+) {
+ const {
props: propsToTransform,
spreadProps,
classProps,
- supportsClassName = false,
- }: StyledOptions = {}
-) {
+ } = typeof styledBaseClassNameOrOptions === "object"
+ ? styledBaseClassNameOrOptions
+ : maybeOptions;
+
+ const baseClassName =
+ typeof styledBaseClassNameOrOptions === "string"
+ ? styledBaseClassNameOrOptions
+ : maybeOptions?.baseClassName;
+
function Styled(
{
className,
tw: twClassName,
- baseClassName,
baseTw,
style: styleProp,
children: componentChildren,
@@ -117,7 +145,6 @@ export function styled<
spreadProps,
classProps,
preview,
- supportsClassName,
});
const children = childStyles
diff --git a/src/with-styled-props.ts b/src/with-styled-props.ts
index 21b7a90..79a1a03 100644
--- a/src/with-styled-props.ts
+++ b/src/with-styled-props.ts
@@ -13,7 +13,6 @@ export interface WithStyledPropsOptions {
spreadProps?: T[];
classProps?: T[];
preview: boolean;
- supportsClassName: boolean;
}
export type WithStyledProps = Record & {