[system] Use the CustomSystemProps interface in Box Props

.circleci/config.yml

@@ -266,6 +266,7 @@ jobs:
             yarn workspace @mui/material typescript:module-augmentation
             yarn workspace @mui/base typescript:module-augmentation
             yarn workspace @mui/joy typescript:module-augmentation
+            yarn workspace @mui/system typescript:module-augmentation
 
       - restore_cache:
           name: Restore generated declaration files

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

@@ -168,7 +168,7 @@ export type SystemProps<Theme extends object = {}> = {
   [K in StandardSystemKeys]?:
     | ResponsiveStyleValue<AllSystemCSSProperties[K]>
     | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>);
-};
+} & CustomSystemProps;
 
 export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div', T extends object = Theme> {
   props: P &

packages/mui-system/test/typescript/moduleAugmentation/boxCustomSystemProps.spec.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Box } from '@mui/system';
+
+declare module '@mui/system' {
+  interface CustomSystemProps {
+    customProp?: 'customValue';
+  }
+}
+
+function CustomSystemPropsTest() {
+  <Box customProp="customValue" />;
+}
+
+function InvalidCustomSystemPropsValueTest() {
+  // @ts-expect-error otherCustomValue is not assignable to customValue
+  <Box customProp="otherCustomValue" />;
+}
+
+function UndefinedCustomSystemPropsTest() {
+  // @ts-expect-error otherCustomProp is not defined in CustomSystemProps
+  <Box otherCustomProp="customValue" />;
+}