add NonForwardedProps global config

docs/pages/rounded-button.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider, Button } from '@mui/material';
+import { NonForwardedProps } from '@mui/system';
+
+NonForwardedProps.set('MuiButton', ['rounded']);
+// NonForwardedProps.set('MuiButtonBase', ['rounded']);
+// NonForwardedProps.set('MuiTouchRipple', ['rounded']);
+
+declare module '@mui/material/Button' {
+  interface ButtonExtraProps {
+    rounded?: boolean;
+  }
+}
+
+const theme = createTheme({
+  components: {
+    MuiButton: {
+      variants: [
+        {
+          props: { rounded: true }, // this works great! but there is no way to update the TS
+          style: {
+            borderRadius: 50,
+          },
+        },
+      ],
+    },
+  },
+});
+
+export default function RoundedButton() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Button rounded variant="contained">
+        Rounded
+      </Button>
+    </ThemeProvider>
+  );
+}

packages/mui-material/src/Button/Button.d.ts

@@ -12,6 +12,8 @@ export interface ButtonPropsColorOverrides {}
 
 export interface ButtonPropsSizeOverrides {}
 
+export interface ButtonExtraProps {}
+
 export type ButtonTypeMap<
   P = {},
   D extends React.ElementType = 'button',
@@ -84,7 +86,7 @@ export type ButtonTypeMap<
       'text' | 'outlined' | 'contained',
       ButtonPropsVariantOverrides
     >;
-  };
+  } & ButtonExtraProps;
   defaultComponent: D;
 }>;
 

packages/mui-system/src/createStyled.d.ts

@@ -10,6 +10,11 @@ export interface SerializedStyles {
   next?: SerializedStyles;
 }
 
+export const NonForwardedProps: {
+  set: (componentName: string, nonForwardedProps: string[]) => void;
+  get: (componentName: string, prop: any) => boolean;
+};
+
 export type CSSProperties = CSS.PropertiesFallback<number | string>;
 export type CSSPropertiesWithMultiValues = {
   [K in keyof CSSProperties]: CSSProperties[K] | Array<Extract<CSSProperties[K], string>>;

packages/mui-system/src/createStyled.js

@@ -53,6 +53,24 @@ const variantsResolver = (props, styles, theme, name) => {
   return variantsStyles;
 };
 
+function createNonForwardedProps() {
+  const nonForwardedProps = {};
+  return {
+    set(componentName, props) {
+      nonForwardedProps[componentName] = props;
+    },
+    get(componentName, prop) {
+      const list = nonForwardedProps[componentName];
+      if (!list) {
+        return true;
+      }
+      return !list.includes(prop);
+    },
+  };
+}
+
+export const NonForwardedProps = createNonForwardedProps();
+
 export function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
@@ -76,6 +94,7 @@ export default function createStyled(input = {}) {
       skipVariantsResolver: inputSkipVariantsResolver,
       skipSx: inputSkipSx,
       overridesResolver,
+      shouldForwardProp: shouldForwardPropOption,
       ...options
     } = inputOptions;
 
@@ -95,17 +114,20 @@ export default function createStyled(input = {}) {
       }
     }
 
-    let shouldForwardPropOption = shouldForwardProp;
+    let finalShouldForwardProp = shouldForwardPropOption || shouldForwardProp;
 
-    if (componentSlot === 'Root') {
-      shouldForwardPropOption = rootShouldForwardProp;
-    } else if (componentSlot) {
-      // any other slot specified
-      shouldForwardPropOption = slotShouldForwardProp;
+    if (!shouldForwardPropOption) {
+      if (componentSlot === 'Root') {
+        finalShouldForwardProp = rootShouldForwardProp;
+      } else if (componentSlot) {
+        // any other slot specified
+        finalShouldForwardProp = slotShouldForwardProp;
+      }
     }
 
     const defaultStyledResolver = styledEngineStyled(tag, {
-      shouldForwardProp: shouldForwardPropOption,
+      shouldForwardProp: (prop) =>
+        finalShouldForwardProp(prop) && NonForwardedProps.get(componentName, prop),
       label,
       ...options,
     });