x

Pass dynamic variables such as useState to static css variables from inline styles and reference the dynamic values from your static stylesheet.

To use x, pass your static css.props() result as the first argument, and an object of CSS variables as the second.

Example

Component.tsx

import { useState } from 'react';
import { x, css } from '@plumeria/core';
 
const styles = css.create({
  bar: {
    width: 'var(--width)',
    background: 'aqua',
  },
});
 
export const Component = () => {
  const [state, setState] = useState(0);
  return (
    <div {...x(css.props(styles.bar), { '--width': state + 'px' })} />
  )
}

Use sparingly

x() is powerful, but it comes with a small runtime cost due to inline styles. For styles that are not dynamic, prefer using static variants with css.create() and css.props() wherever possible.

x

Example

On this page