TypeScript

CSS properties

The default style builder uses React CSS property types:

import type { CSSProperties } from '@fluentic/style';

Component props

import type { CssProp, CssTheme } from '@fluentic/style';

type Props = {
  css?: CssProp;
  theme?: CssTheme;
};

Style object

import type { StyleObject } from '@fluentic/style';

const base: StyleObject<CSSProperties> = {
  display: 'grid',
};

Custom type surface

import { createStyleFn, type } from '@fluentic/style';

type AllowedStyles = Pick<CSSProperties, 'color' | 'backgroundColor'>;

const { style } = createStyleFn({
  style: type<AllowedStyles>,
  selectors: {},
});

Use custom style functions when you want a constrained styling API for a design system or a domain-specific component package.