[docs] Supporting scss records within sx prop (typescript)

[afatoga]

Related page

https://github.com/mui/pigment-css?tab=readme-ov-file#typescript-1

Kind of issue

Unclear explanations

Issue description

From time to time I use scss in sx property of HTML element or component, and I encountered that tsc check showed me an error

Object literal may only specify known properties, and '':where(&)'' does not exist in type 'CSSProperties | ((theme: Theme) => CSSProperties) | readonly (CSSProperties | ((theme: Theme) => CSSProperties))[]'.ts(2353)

on this code:

 <td
                sx={{
                  ':where(&)': {
                    verticalAlign: 'top',
                    padding: '8px 12px',
                  },
                }}

So I deducted editing pigment.d.ts file like this:

import type { StyledArgument } from '@pigment-css/react'

declare global {
  namespace React {
    interface HTMLAttributes<T> {
      sx?:
        | StyledArgument // Announcement: this enables using e.g. "&>button" within sx prop
        | React.CSSProperties
        | ((theme: Theme) => React.CSSProperties)
        | ReadonlyArray<React.CSSProperties | ((theme: Theme) => React.CSSProperties)>
    }
  }
}

Context

No response

Search keywords: sx, typescript, scss