Function cx

cx(...classNames: (string | CSSObject | undefined)[]): string

Merges multiple classNames

Parameters

...classNames: (string | CSSObject | undefined)[]

Returns string

Example: Combine two class names

const color = className({ color: 'blue' });
const background = className({ background: 'yellow' });

function MyComponent() {
  return (
    <div className={cx(color, background)}>
      Colorized
    </div>
  );
}

Example: Conditionally apply classes

const color = className({ color: 'blue' });
const background = className({ background: 'yellow' });

function MyComponent(props) {
  return (
    <div
      className={cx(color, {
        // Set the background color only if `props.isActive` is `true`
        [background]: props.isActive,
      })}
    >
      Colorized
    </div>
  );
}