Plumeria logoPLUMERIA
API reference

props

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

Example

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

css.props(styless.responsive);

Usage Patterns

Conditional styles

Only truthy values are preserved.

const isActive = true;
 
const className = css.props(
  styles.one,
  isActive && styles.two
);

With ternary

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

Return value

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

css.props(styles.one, false, undefined, styles.two);

See Also

Good to know

Since falsy values are filtered out, you can use logical and, ternary operators, etc. in argument expressions.
Nested ternary operators are not supported as this would require complex parsing.

More

See more about create

See more about defineConsts

Edit on GitHub

Previous

create

Next

keyframes

On this page