Using the sx prop with TypeScript

[corydeppen]

I've tried using the sx prop on JSX elements but hit a TypeScript error Property 'sx' does not exist on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'. None of the examples appear to use the prop, but I was wondering if a type needs to be augmented to allow the prop to be used.

Is there additional configuration needed to use the sx prop within a TypeScript project?

Example: https://stackblitz.com/edit/github-exkhdnrp?file=src%2FApp.tsx

[krotname]

The StyleX transform can compile the sx shorthand, but TypeScript is still checking React's normal JSX types. React's intrinsic button/div props do not include sx, so you need to add a local ambient type if you want to use that shorthand in TS.

For example, add something like src/stylex-jsx.d.ts and make sure it is included by your tsconfig:

import type { StyleXStyles } from '@stylexjs/stylex';

declare module 'react' {
  interface HTMLAttributes<T> {
    sx?: StyleXStyles;
  }

  interface SVGAttributes<T> {
    sx?: StyleXStyles;
  }
}

Then this should type-check:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  button: { color: 'red' },
});

export function App() {
  return <button sx={styles.button}>Click</button>;
}

The bundler plugin still has to run the StyleX transform; @stylexjs/unplugin documents sxPropName as enabled by default with the name sx: https://stylexjs.com/docs/api/configuration/unplugin/#options-shared

If you do not want a global JSX augmentation, the typed fallback is still the explicit form:

<button {...stylex.props(styles.button)}>Click</button>

[nmn]

This is currently the recommended solution. We don't modify the types ourselves because:

1. you can rename sx to something else via configuration
2. you may be using something that is not React