Data Types

While not an exhaustive list of all types defined in the library, this section covers the core data types that are essential to using the library.


Type: object

When passing styles to the style, styleMap and styleTree functions, or returning styles from a ThemedStyles function, you’ll need to define them in the following format.

{ color: 'red', fontFamily: 'comic sans ms', fontSize: 24 }

Simple pseudo selectors are supported at the top level.

{ color: 'red', ':hover': { backgroundColor: 'pink' }, ':active': { backgroundColor: 'tomato' } }

Media queries are also supported via the @media key.

{ fontSize: 24, '@media': { 'screen and (min-width: 768px)': { fontSize: 42 } } }

For anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (&), which refers to the element currently being styled.

{ marginRight: 10, selectors: { '&:nth-child(2n)': { marginRight: 0 } } }

Within selectors, existing treat classes can be referenced with standard string interpolation.

{ backgroundColor: 'white', selectors: { [`${parentClass} &`]: { backgroundColor: 'aqua' } } }

The @keyframes property allows the creation of keyframes that will automatically be attached to the style as your animation-name.

{ backgroundColor: 'white', '@keyframes': { from: { transform: 'rotate(0deg)', }, to: { transform: 'rotate(359deg)', }, }, animationTimingFunction: 'linear', animationDuration: '1.5s', }

The animation shorthand is also supported via a @keyframes placeholder.

{ backgroundColor: 'white', '@keyframes': { from: { transform: 'rotate(0deg)', }, to: { transform: 'rotate(359deg)', }, }, animation: '@keyframes 1.5s linear' }


Type: function

Accepts a Theme and returns a Styles object.

(theme) => ({ color: theme.brandColor });


When defining themes and consuming themes, the provided theme object uses the Theme type, which is any by default. This means that any usage of a theme will not be type-safe.

The simplest way to fix this is to override this type at a global level. For example, you could create a treat.d.ts file in your project with the following contents.

declare module 'treat/theme' { export interface Theme { brandColor: string; grid: number; } }

If your Theme type is already defined elsewhere in your application, you’ll need to import it with a dynamic import expression within the module declaration block.

declare module 'treat/theme' { type MyTheme = import('./types').Theme; export interface Theme extends MyTheme {} }

Alternatively, if you’d prefer to avoid global types, you can manually annotate the theme object being passed into a ThemedStyles function.

import { style } from 'treat'; import { Theme } from './types'; const themedClass = style((theme: Theme) => ({ color: theme.brandColor }));