stylex.props

Takes an StyleX style or array of StyleX styles, and returns a props object. Values can also be null, undefined, or false.

The return value should be onto an element to apply the styles directly.

function props(styles: StyleXStyles | StyleXStyles[]): {
  className: string;
  style: {[key: string]: string};
};

Example use:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    backgroundColor: 'red',
    padding: '1rem',
    paddingInlineStart: '2rem',
  },
  conditional: {
    backgroundColor: 'blue',
  },
  dynamic: (opacity) => ({
    opacity,
  }),
});

<div
  {...stylex.props(
    styles.root,
    condition && styles.conditional,
    props.style,
    styles.dynamic(state.opacity),
  )}
/>;

Not using React?

For Solid, Svelte, Qwik, Vue

For frameworks that expect class instead of className, and expect style to be a string instead of an object, you can wrap use of the props API with the function below.

export function attrs({ className, 'data-style-src': dataStyleSrc, style }) {
  const result = {};
  // Convert className to class
  if (className != null && className !== '') {
    result.class = className;
  }
  // Convert style object to string
  if (style != null && Object.keys(style).length > 0) {
    result.style = Object.keys(style)
      .map((key) => `${key}:${style[key]};`)
      .join('');
  }
  if (dataStyleSrc != null && dataStyleSrc !== '') {
    result['data-style-src'] = dataStyleSrc;
  }
  return result;
}

Example use:

<div {...attrs(stylex.props(...styles))} />