From f4927a4e78940a96c444615834c2ba0fc3b674df Mon Sep 17 00:00:00 2001
From: mnajdova <mnajdova@gmail.com>
Date: Fri, 22 Sep 2023 13:34:52 +0200
Subject: [PATCH] improve the type

---
 packages/mui-styles/src/styled/styled.spec.tsx     | 10 ++++++++++
 packages/mui-styles/src/withStyles/withStyles.d.ts |  1 +
 2 files changed, 11 insertions(+)

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>]