sx Prop Types

[NeilTheFisher]

Steps to reproduce

No response

Current behavior

Putting the sx prop on a React element like a div doesn't give type hints

Expected behavior

No response

Context

I am converting a project's emotion css props to use pigment's sx prop since they work the same. It just doesn't have types.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 18.19.0 - D:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - D:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.1 - D:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    react: beta => 19.0.0-beta-26f2496093-20240514 
    react-dom: beta => 19.0.0-beta-26f2496093-20240514 
    types-react:  19.0.0-beta.1 
    typescript: ^5.4.5 => 5.4.5

Search keywords: sx types

[NeilTheFisher]

Two solutions:

1. Create an index.d.ts file with the contents:

   import type { sx } from "@pigment-css/react";
   
   declare global {
     namespace React {
       interface DOMAttributes<T> {
         sx?: Parameters<typeof sx>[0];
       }
     }
   }

2. Add this to sx.d.ts. (presumably in a PR)

   declare global {
     namespace React {
       interface DOMAttributes<T> {
         sx?: Parameters<typeof sx>[0];
       }
     }
   }

   Then add /// <reference types="@pigment-css/react" /> to a type declaration file

[NeilTheFisher]

Just realized this is mentioned in the readme in #57: https://github.com/mui/pigment-css/blob/4a7f6f56327f7df364921df6644a275fd943b4b1/README.md?plain=1#L520C1-L532C4

[brijeshb42]

Feel free to re-open if you are still facing any issue.