StaticStyles

View as Markdown

type StaticStyles<K extends StyleKey = StyleKey> = StyleList<StaticNamespace<K>>;
export type { StaticStyles };

StaticStyles rejects the result of a dynamic style, which is a style defined as a function in css.create. A dynamic style has to reach the element as a custom property, so a component that turns its styles into a class name string with css.use() cannot carry one.

Without a type argument

Every property is accepted and only the dynamic style is rejected:

TypeScript

import * as css from '@plumeria/core';

const styles = css.create({
  base: {
    padding: '8px',
  },
  tinted: {
    color: 'gold',
  },
  sized: (width: number) => ({
    width,
  }),
});

type ChipProps = {
  classStyle?: css.StaticStyles;
};

export function Chip({ classStyle }: ChipProps) {
  return <span className={css.use(styles.base, classStyle)} />;
}

<Chip classStyle={styles.tinted} />      // ok
<Chip classStyle={styles.sized(120)} />  // Type error

With a type argument

A type argument narrows the properties as well, so StaticStyles<'color'> is StyleProps<'color'> without dynamic styles:

type BadgeProps = {
  classStyle?: css.StaticStyles<'color' | 'backgroundColor'>;
};

Good to know

A component that applies its styles through the classStyle prop can carry a dynamic style. Use StyleProps or WithoutProperties there instead.

StaticStyles

Without a type argument

With a type argument

On this page