Skip to content

Improve documentation about adding TypeScript support for the sx prop#384

Open
bartlangelaan wants to merge 1 commit intomui:masterfrom
bartlangelaan:improve-documentation-about-adding-typescript-support-for-the-sx-prop
Open

Improve documentation about adding TypeScript support for the sx prop#384
bartlangelaan wants to merge 1 commit intomui:masterfrom
bartlangelaan:improve-documentation-about-adding-typescript-support-for-the-sx-prop

Conversation

@bartlangelaan
Copy link
Copy Markdown

This clarifies in the README.md that you can import SxProp from @pigment-css/react to add sx support to all HTML elements.

@lpicchi
Copy link
Copy Markdown

lpicchi commented Feb 10, 2026

Thank you with this change I was able to fix my Typescript errors:

This is my augmentation file for reference:

// any file that is included in your tsconfig.json
import { SxProp } from "@pigment-css/react";
import type { ExtendTheme } from "@pigment-css/react/theme";

declare module "@pigment-css/react/theme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  interface ThemeTokens {}

  interface ThemeArgs {
    theme: ExtendTheme<{
      colorScheme: "light" | "dark";
      tokens: ThemeTokens;
    }>;
  }
}

declare global {
  namespace React {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    interface HTMLAttributes<T> {
      sx?: SxProp;
    }
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants