mui/pigment-css

Type error is thrown when using shorthand alias in sx prop

Closed this issue · 1 comments

Steps to reproduce

View the usage of the Stack component in the reproduction example. Notice that the pt: 2 alias causes the type error while using paddingTop: 2 does not.

<Stack direction="row" spacing={1} sx={{ alignItems: 'center', pt: 2 }}>
  <Button variant="outlined">One</Button>
  <Button variant="contained">Two</Button>
</Stack>

Current behavior

The following error is shown in the editor when using a shorthand alias in the sx prop of a component:

No overload matches this call.
  Overload 2 of 2, '(props: StackBaseProps): ReactNode', gave the following error.
    Type '{ children: Element[]; direction: "row"; spacing: number; sx: { alignItems: string; pt: number; }; }' is not assignable to type 'IntrinsicAttributes & StackBaseProps'.
      Property 'children' does not exist on type 'IntrinsicAttributes & StackBaseProps'.(2769)

Setting responsive values (e.g. width: { xs: "100%", sm: "auto" }) in the sx prop results in a type error as well.

While the property aliases and responsive values appear to be transformed as expected, they cause type errors that are not thrown when using the full CSS property name.

Expected behavior

No type errors should be thrown when using shorthand aliases in the sx prop.

Context

No response

Your environment

npx @mui/envinfo
System:
  OS: Linux 5.0 undefined
Binaries:
  Node: 18.20.3 - /usr/local/bin/node
  npm: 10.2.3 - /usr/local/bin/npm
  pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
  Chrome: Not Found
npmPackages:
  @emotion/react:  11.13.0 
  @emotion/styled:  11.13.0 
  @mui/core-downloads-tracker:  6.0.0-dev.240424162023-9968b4889d 
  @mui/icons-material: 6.0.0-beta.4 => 6.0.0-beta.4 
  @mui/material: 6.0.0-beta.4 => 6.0.0-beta.4 
  @mui/material-pigment-css: 6.0.0-beta.4 => 6.0.0-beta.4 
  @mui/private-theming:  6.0.0-beta.4 
  @mui/styled-engine:  6.0.0-beta.4 
  @mui/system: 6.0.0-beta.4 => 6.0.0-beta.4 
  @mui/types:  7.2.15 
  @mui/utils:  6.0.0-beta.4 
  @types/react: ^18.3.3 => 18.3.3 
  react: ^18.3.1 => 18.3.1 
  react-dom: ^18.3.1 => 18.3.1 
  typescript: ^5.5.3 => 5.5.4

Search keywords: shorthand alias type sx

It looks like this may have been resolved by #196 - I no longer see the issue.