Skip to main content

Static types

Types for style props​

StyleX comes with full support for Static Types. The most common utility type is StyleXStyles which is used to accept any arbitrary StyleX styles.

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

type Props = {
  ...
  style?: StyleXStyles,
};

function MyComponent({style, ...otherProps}: Props) {
  return (
    <div
      {...stylex.props(localStyles.foo, localStyles.bar, style)}
    >
      {/* ... */}
    </div>
  );
}
Disallowing dynamic styles

StaticStyles can be used instead of StyleXStyles to accept arbitrary static styles, but disallow dynamic styles.

Constraining accepted styles​

Type arguments can be used with StyleXStyles<{...}> to limit the styles that are accepted.

Accepting from a set of style properties​

To limit the accepted style properties to a given set, an object type with the allowed properties can be used:

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

type Props = {
  // ...
  style?: StyleXStyles<{
    color?: string;
    backgroundColor?: string;
    borderColor?: string;
    borderTopColor?: string;
    borderEndColor?: string;
    borderBottomColor?: string;
    borderStartColor?: string;
  }>;
};

The style prop will now accept only the properties defined but disallow anything else.

Good Default Styles

It is a good practice to make the keys of the style types optional and have baseline styles in the component itself.

TypeScript may not catch extra style properties

TypeScript object types don’t error when given objects with extra properties. We’ve taken steps to mitigate this issue, but there may be edge-cases where you’ll be able to pass in extra, disallowed styles without a type error.

Limiting the possible values for styles​

In addition to the accepted style properties, the values for those properties can be constrained too.

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

type Props = {
  ...
  // Only accept styles for marginTop and nothing else.
  // The value for marginTop can only be 0, 4, 8 or 16.
  style?: StyleXStyles<{
    marginTop: 0 | 4 | 8 | 16
  }>,
};

Now, this component only accepts styles that have a marginTop property and no other properties. The value for marginTop can only be one of 0, 4, 8, or 16.

Disallowing properties​

It is sometimes more convenient to define a blocklist instead of an allowlist.

import type {StyleXStylesWithout} from '@stylexjs/stylex';
import * as stylex from '@stylexjs/stylex';

type NoLayout = StyleXStylesWithout<{
  position: unknown,
  display: unknown,
  top: unknown,
  start: unknown,
  end: unknown,
  bottom: unknown,
  border: unknown,
  borderWidth: unknown,
  borderBottomWidth: unknown,
  borderEndWidth: unknown,
  borderStartWidth: unknown,
  borderTopWidth: unknown,
  margin: unknown,
  marginBottom: unknown,
  marginEnd: unknown,
  marginStart: unknown,
  marginTop: unknown,
  padding: unknown,
  paddingBottom: unknown,
  paddingEnd: unknown,
  paddingStart: unknown,
  paddingTop: unknown,
  width: unknown,
  height: unknown,
  flexBasis: unknown,
  overflow: unknown,
  overflowX: unknown,
  overflowY: unknown,
}>;

type Props = {
  // ...
  style?: NoLayout,
};

function MyComponent({style, ...}: Props) {
  return (
    <div
      {...stylex.props(localStyles.foo, localStyles.bar, style)}
    >
      {/* ... */}
    </div>
  );
}

Here the listed properties in the object type will be disallowed, but all other styles will still be accepted.