diff --git a/packages/mui-styles/src/styled/styled.spec.tsx b/packages/mui-styles/src/styled/styled.spec.tsx
index 61c1a34af8471f..4c0bfe23ba3621 100644
--- a/packages/mui-styles/src/styled/styled.spec.tsx
+++ b/packages/mui-styles/src/styled/styled.spec.tsx
@@ -123,4 +123,14 @@ function variantsAPI() {
       },
     ],
   }));
+
+  const WrongUsage = styled('div')<{}, { foo?: string; bar?: number }>({
+    color: [
+      // @ts-expect-error the API is not valid for CSS properties
+      {
+        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 cfa5c9812ac828..253cf0a64ed498 100644
--- a/packages/mui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/mui-styles/src/withStyles/withStyles.d.ts
@@ -37,6 +37,7 @@ export type BaseCreateCSSProperties<Props extends object = {}> = {
 
 export interface CreateCSSProperties<Props extends object = {}>
   extends BaseCreateCSSProperties<Props> {
+  variants?: Array<{ props: Props; style: CSSProperties }>;
   // Allow pseudo selectors and media queries
   [k: string]:
     | BaseCreateCSSProperties<Props>[keyof BaseCreateCSSProperties<Props>]