Plumeria logo/ ✾ Plumeria
API reference

props

The css.props() function returns styleObject as hashedClassName together while filtering out falsy values like undefined, false, or null. It is useful when conditionally combining styles.

TypeScript
import { css } from '@plumeria/core';
 
const styles = css.create({
  one: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  two: {
    fontSize: '14px',
    color: '#606060',
  },
});
 
const className = css.props(styles.one, styles.two);  // →  "one_ocpc7u two_ocpc7u"

💡 className will be something like "one_ocpc7u two_ocpc7u"
Only truthy values are preserved.

Usage Patterns

Conditional styles

const isActive = true;
 
const className = css.props(
  styles.one,
  isActive && styles.two // 'styles.two' is only added when isActive is true
);

With ternary

const className = css.props(
  isDark ? styles.dark : styles.light,
  isHovered && styles.hovered
);

Return value

Returns a single string of space-separated styleObject, ignoring falsy inputs:

css.props(styles.one, false, undefined, styles.two); // → "one_ocpc7u two_ocpc7u"

See Also

Good to know

Since falsy values are filtered out, you can use logical and, ternary operators, etc. in argument expressions.

More

On this page

;