feat: add baseClassName option to styled()

__tests__/styled/__snapshots__/props.tsx.snap

@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Styled - Base Class Name can add new classNames 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+      },
+      Object {
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 16,
+      },
+    ]
+  }
+/>
+`;
+
+exports[`Styled - Base Class Name can set base classNames 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+      },
+    ]
+  }
+/>
+`;
+
 exports[`Styled - Props can style custom props 1`] = `
 Array [
   <View

__tests__/styled/props.tsx

@@ -48,3 +48,29 @@ describe("Styled - Values Props", () => {
     expect(tree).toMatchSnapshot();
   });
 });
+
+describe("Styled - Base Class Name", () => {
+  const StyledView = styled(View, {
+    baseClassName: "flex-row",
+  });
+
+  test("can set base classNames", () => {
+    const tree = render(
+      <TestProvider css="flex-row">
+        <StyledView />
+      </TestProvider>
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test("can add new classNames", () => {
+    const tree = render(
+      <TestProvider css="flex-row p-4">
+        <StyledView className="p-4" />
+      </TestProvider>
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/styled.tsx

@@ -25,6 +25,7 @@ export interface StyledOptions<P> {
   spreadProps?: Array<keyof P & string>;
   classProps?: Array<keyof P & string>;
   supportsClassName?: boolean;
+  baseClassName?: string;
 }
 
 type ForwardRef<T, P> = ForwardRefExoticComponent<
@@ -40,7 +41,7 @@ type InferRef<T> = T extends RefAttributes<infer R> | ClassAttributes<infer R>
  */
 export function styled<T>(
   Component: ComponentType<T>,
-  options?: { props?: undefined; spreadProps?: undefined }
+  options?: StyledOptions<T> & { props?: undefined; spreadProps?: undefined }
 ): ForwardRef<InferRef<T>, StyledProps<T>>;
 
 /**
@@ -48,7 +49,11 @@ export function styled<T>(
  */
 export function styled<T, K extends keyof T & string>(
   Component: ComponentType<T>,
-  options: { props?: Array<K>; spreadProps?: Array<K>; classProps?: Array<K> }
+  options: StyledOptions<T> & {
+    props?: Array<K>;
+    spreadProps?: Array<K>;
+    classProps?: Array<K>;
+  }
 ): ForwardRef<InferRef<T>, StyledPropsWithKeys<T, K>>;
 
 /**
@@ -63,6 +68,7 @@ export function styled<
     spreadProps,
     classProps,
     supportsClassName = false,
+    baseClassName,
   }: StyledOptions<T> = {}
 ) {
   function Styled(
@@ -78,6 +84,7 @@ export function styled<
     const { platform, preview } = usePlatform();
 
     const { classes, allClasses, isComponent } = withClassNames({
+      baseClassName,
       className,
       twClassName,
       componentProps,

src/with-class-names.ts

@@ -1,4 +1,5 @@
 export interface WithClassNames {
+  baseClassName?: string;
   className?: string;
   twClassName?: string;
   propsToTransform?: string[];
@@ -7,6 +8,7 @@ export interface WithClassNames {
   classProps?: string[];
 }
 export function withClassNames({
+  baseClassName = "",
   className,
   twClassName,
   componentProps,
@@ -14,7 +16,7 @@ export function withClassNames({
   spreadProps = [],
   classProps = [],
 }: WithClassNames) {
-  const classes = twClassName ?? className ?? "";
+  const classes = [baseClassName, twClassName ?? className ?? ""].join(" ");
   const isComponent = classes.split(/\s+/).includes("component");
 
   const allClasses = [];