[system] Use the CustomSystemProps interface in Box Props

[IgnusG]

• I have followed (at least) the PR section of the contributing guide.

Resolves #35565

[ZeeshanTamboli]

Should we also add a test that the custom system prop provided directly to the system components (Box, Typography, etc) applies the styling properly (probably from the theme?) ?

[IgnusG]

Should we also add a test that the custom system prop provided directly to the system components (Box, Typography, etc) applies the styling properly (probably from the theme?) ?

I think this might be out of scope for this PR. It's up to the user to make sure these props are handled correctly by I think using this experimental API for handling sx which system props use internally to decide what to do with props that are custom?

Without using this API it can still be useful to use CustomSystemProps for restricting the values on existing custom props, eg. forcing fontWeight to only accept values medium and bold (which map to fontWeightMedium and fontWeightBold in the theme) instead of allowing anything including custom font size numbers (200, 300 etc.)

[ZeeshanTamboli]

Should we also add a test that the custom system prop provided directly to the system components (Box, Typography, etc) applies the styling properly (probably from the theme?) ?

I think this might be out of scope for this PR. It's up to the user to make sure these props are handled correctly by I think using this experimental API for handling sx which system props use internally to decide what to do with props that are custom?

Without using this API it can still be useful to use CustomSystemProps for restricting the values on existing custom props, eg. forcing fontWeight to only accept values medium and bold (which map to fontWeightMedium and fontWeightBold in the theme) instead of allowing anything including custom font size numbers (200, 300 etc.)

@mnajdova would know better.

[ZeeshanTamboli]

Also please update with latest master branch to fix the CI.

[JoseGalRe]

Hi, there any new about this PR?

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 720b933

[ZeeshanTamboli]

The test_types CI job is failing. It is because the types are mismatched between sx prop aliases mt, pt etc. in StandardCssProperties and AliasesCSSProperties. Let's remove it. The following diff should work:

--- 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> = 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<

---

Without using this API it can still be useful to use CustomSystemProps for restricting the values on existing custom props, eg. forcing fontWeight to only accept values medium and bold (which map to fontWeightMedium and fontWeightBold in the theme) instead of allowing anything including custom font size numbers (200, 300 etc.)

This sounds like a good reason to accept this PR. I would also like it if you added the docs about restricting the values on existing properties under https://mui.com/system/getting-started/the-sx-prop/#typescript-usage with an example.

[IgnusG]

@ZeeshanTamboli I will include the requested changes 👍

[ZeeshanTamboli]

I ran the CI and the TypeScript tests failed with the following error:

Expression produces a union type that is too complex to represent.ts(2590)

for

    <BoxStyled error={error} success={success} className={className} {...others}>
      <Typography color="inherit">{children}</Typography>
    </BoxStyled>

It could be related to #34068 or it could be a TypeScript problem - microsoft/TypeScript#52459.

Or perhaps it is occurring because the sx prop type is too complex and TypeScript cannot handle it with long unions. We would like to simplify it first. See the discussion in #19113.

If you have a solution for this, please go ahead. Otherwise, we will have to hold off this PR.

[IgnusG]

Cleaning up 🚧