StyleProps

View as Markdown

type StyleProps<K extends StyleKey> = StyleList<AllowedNamespace<K>>;
export type { StyleProps };

StyleProps enumerates the properties a component accepts through a style prop. A style that sets anything outside the list is rejected.

Example

TypeScript

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

const styles = css.create({
  base: {
    fontSize: '14px',
  },
});

type TextProps = {
  classStyle?: css.StyleProps<'color' | 'fontSize'>;
};

export function Text({ classStyle }: TextProps) {
  return <span classStyle={[styles.base, classStyle]} />;
}

<Text classStyle={styles.tinted} />  // ok when tinted only sets color
<Text classStyle={styles.pinned} />  // Type error when pinned sets position

Nested blocks are covered

The enumeration reaches into pseudo classes and at-rules, so a property that is only set inside a nested block is checked the same way:

// Type error, position is not enumerated
<Text classStyle={styles.hoverPinned} />

const styles = css.create({
  hoverPinned: {
    ':hover': {
      position: 'fixed',
    },
  },
});

Good to know

When a component only needs to protect a few properties, WithoutProperties is the shorter way to say the same thing.

StyleProps

Example

Nested blocks are covered

On this page