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))} />