diff --git a/packages/mui-styles/src/styled/styled.spec.tsx b/packages/mui-styles/src/styled/styled.spec.tsx
index 3aefe2e4c85d7a..61c1a34af8471f 100644
--- a/packages/mui-styles/src/styled/styled.spec.tsx
+++ b/packages/mui-styles/src/styled/styled.spec.tsx
@@ -104,3 +104,23 @@ function acceptanceTest() {
     </React.Fragment>
   );
 }
+
+function variantsAPI() {
+  const ObjectSyntax = styled('div')<{}, { foo?: string; bar?: number }>({
+    variants: [
+      {
+        props: { foo: 'a' },
+        style: { color: 'blue' },
+      },
+    ],
+  });
+
+  const FunctionSyntax = styled('div')<{}, { foo?: string; bar?: number }>(() => ({
+    variants: [
+      {
+        props: { foo: 'a' },
+        style: { color: 'blue' },
+      },
+    ],
+  }));
+}
diff --git a/packages/mui-styles/src/withStyles/withStyles.d.ts b/packages/mui-styles/src/withStyles/withStyles.d.ts
index 1dd55978cbf40b..cfa5c9812ac828 100644
--- a/packages/mui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/mui-styles/src/withStyles/withStyles.d.ts
@@ -40,7 +40,8 @@ export interface CreateCSSProperties<Props extends object = {}>
   // Allow pseudo selectors and media queries
   [k: string]:
     | BaseCreateCSSProperties<Props>[keyof BaseCreateCSSProperties<Props>]
-    | CreateCSSProperties<Props>;
+    | CreateCSSProperties<Props>
+    | Array<{ props: Props; style: CSSProperties }>;
 }
 
 /**