Skip to main content

StaticStyles<>

A type that allows only static styles generated by StyleX and disallows inline styles. i.e. Dynamic styles defined using functions are not allowed.

It also allows the styles to be nested within arrays and be arbitrarily deep. Further, null, undefined and false are always accepted.

Further, you can pass in an object type to constrain the styles to specific properties and values:

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

type Props = {
// ...
style?: StaticStyles<{
color?: 'red' | 'blue' | 'green';
padding?: 0 | 4 | 8 | 16 | 32;
backgroundColor?: string;
borderColor?: string;
borderTopColor?: string;
borderEndColor?: string;
borderBottomColor?: string;
borderStartColor?: string;
}>;
};

Any key not defined in the object type will be disallowed.

Only known keys are checked

Due to a Typescript limitation, any key not in your custom object type will only be disallowed if it's one of the known style properties in the internal StyleX types.

Typescript will not error if you pass an additional unknown key.