TypeScript

Use xstyled with TypeScript.

xstyled is written in TypeScript, all the library is strongly typed. It works out of the box for TypeScript users.

You may have to configure styled-components or Emotion, especially if you use a theme.

Use TypeScript with Styled Components

Create a declaration file

// styled.d.ts

// import original module declarations
import 'styled-components'
import '@xstyled/system'
import {
  ITheme,
  DefaultTheme as XStyledDefaultTheme,
} from '@xstyled/styled-components'

interface AppTheme extends ITheme, XStyledDefaultTheme {
  /* Customize your theme */
}

// and extend them!
declare module '@xstyled/system' {
  export interface Theme extends AppTheme {}
}
declare module 'styled-components' {
  export interface DefaultTheme extends AppTheme {}
}

Read styled-components TypeScript guide to learn more about it.

Use TypeScript with Emotion

Create a declaration file

// styled.d.ts

// import original module declarations
import '@xstyled/system'
import '@emotion/react'
import { ITheme, DefaultTheme as XStyledDefaultTheme } from '@xstyled/emotion'

interface AppTheme extends ITheme, XStyledDefaultTheme {
  /* Customize your theme */
}

// and extend them!
declare module '@xstyled/system' {
  export interface Theme extends AppTheme {}
}
declare module '@emotion/react' {
  export interface Theme extends XStyledDefaultTheme {
    /* Customize your theme */
  }
}

Read Emotion TypeScript guide to learn more about it.