[material-ui] Support props callback type in theme variants (#40946)

mui · Mar 2, 2024 · 6d168ac · 6d168ac
1 parent 434cdc1
commit 6d168ac
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/packages/mui-material/src/styles/createTheme.spec.ts b/packages/mui-material/src/styles/createTheme.spec.ts
@@ -210,6 +210,24 @@ const theme = createTheme();
  });
 }
 
+// props callback in variants
+{
+ createTheme({
+ components: {
+ MuiButton: {
+ variants: [
+ {
+ props: (props) => props.color !== 'secondary',
+ style: ({ theme: { palette } }) => ({
+ backgroundColor: palette.grey[500],
+ }),
+ },
+ ],
+ },
+ },
+ });
+}
+
 {
  createTheme({
  shape: {

diff --git a/packages/mui-material/src/styles/variants.d.ts b/packages/mui-material/src/styles/variants.d.ts
@@ -3,7 +3,13 @@ import { ComponentsPropsList } from './props';
 
 export type ComponentsVariants<Theme = unknown> = {
  [Name in keyof ComponentsPropsList]?: Array<{
- props: Partial<ComponentsPropsList[Name]>;
+ props:
+ | Partial<ComponentsPropsList[Name]>
+ | ((
+ props: Partial<ComponentsPropsList[Name]> & {
+ ownerState: Partial<ComponentsPropsList[Name]>;
+ },
+ ) => boolean);
  style: Interpolation<{ theme: Theme }>;
  }>;
 };