[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

docs/data/system/getting-started/the-sx-prop/the-sx-prop.md

@@ -295,6 +295,21 @@ export default function App() {
 }
 ```
 
+### Customizing System Props
+
+System props which are defined on the `<Box />` component and are inherited by most MUI components,
+can have their props explicitly narrowed if needed. For example, the default `fontWeight` is typed
+as `string` but if you would for example like to restrict this usage to [MUI's stepped weights](https://mui.com/system/typography/#font-weight)
+`light`, `medium`, `regular` and `bold` you could type it as:
+
+```ts
+declare module '@mui/system/Box' {
+  interface CustomSystemProps {
+    fontWeight: 'light' | 'medium' | 'regular' | 'bold';
+  }
+}
+```
+
 ## Performance
 
 To learn more about the performance tradeoffs of the `sx` prop, check out [Usage–Performance tradeoffs](/system/getting-started/usage/#performance-tradeoffs).

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

@@ -6,7 +6,6 @@ import {
   AllSystemCSSProperties,
   ResponsiveStyleValue,
   OverwriteCSSProperties,
-  AliasesCSSProperties,
 } from '../styleFunctionSx';
 
 export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props>
@@ -141,7 +140,7 @@ export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFu
   ComposedOwnerState<T>
 > & { filterProps: string[] };
 
-export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {}
+export interface CustomSystemProps extends OverwriteCSSProperties {}
 
 export type SimpleSystemKeys = keyof PropsFor<
   ComposedStyleFunction<
@@ -168,7 +167,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" />;
+}