diff --git a/.circleci/config.yml b/.circleci/config.yml index 2e369f9441f312..e7aebbde4d4fbb 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md index 3eb1d4e25f4052..a9fcebd6d94fe2 100644 --- a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md +++ b/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 `` 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). diff --git a/packages/mui-system/src/Box/Box.d.ts b/packages/mui-system/src/Box/Box.d.ts index 708c83b1ed6094..1beeef9fd645f8 100644 --- a/packages/mui-system/src/Box/Box.d.ts +++ b/packages/mui-system/src/Box/Box.d.ts @@ -6,7 +6,6 @@ import { AllSystemCSSProperties, ResponsiveStyleValue, OverwriteCSSProperties, - AliasesCSSProperties, } from '../styleFunctionSx'; export type PropsFor = SomeStyleFunction extends StyleFunction @@ -141,7 +140,7 @@ export type ComposedStyleFunction>> = StyleFu ComposedOwnerState > & { 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 = { [K in StandardSystemKeys]?: | ResponsiveStyleValue | ((theme: Theme) => ResponsiveStyleValue); -}; +} & CustomSystemProps; export interface BoxTypeMap

{ props: P & diff --git a/packages/mui-system/test/typescript/moduleAugmentation/boxCustomSystemProps.spec.tsx b/packages/mui-system/test/typescript/moduleAugmentation/boxCustomSystemProps.spec.tsx new file mode 100644 index 00000000000000..08e512e7b88d2a --- /dev/null +++ b/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() { + ; +} + +function InvalidCustomSystemPropsValueTest() { + // @ts-expect-error otherCustomValue is not assignable to customValue + ; +} + +function UndefinedCustomSystemPropsTest() { + // @ts-expect-error otherCustomProp is not defined in CustomSystemProps + ; +}