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.

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

More