Styling

export type StyleName = CSSProperties | (false | CSSProperties | null | undefined)[];

The styleName prop removes falsy values and supports conditional branching: styleName={cond && styles.cond}
When used in an array, the last style property always wins.

Example

TypeScript

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

const styles = css.create({
  one: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  two: {
    fontSize: '14px',
    color: '#606060',
  },
});

<div styleName={styles.one, styles.two}>
  {/* ... */}
</div>

Usage Patterns

Conditional styles

Only truthy values are preserved.

const isActive = true;

styleName={[
  styles.one,
  isActive && styles.two
]};

With ternary

styleName={[
  isDark ? styles.dark : styles.light,
  isHovered && styles.hovered
]};

Filtered falsy values:

styleName={[styles.one, false, undefined, styles.two]}

dynamicValue

const styles = css.create({
  palette: (color: string) => ({
    backgroung: color,
  }),
});

export const Color = ({ color }) => {
  return (
    <span styleName={styles.palette(color)}>colorText</span>
  )
}

Good to know

styleName, like all APIs, have no runtime. They are controlled at build time by plugins, so prop themselves are replaced.