Features

Variant styles

To style component based on finite values (e.g. size, color), use variants styles.

// Ex. 1
styled('button')({
  variants: [
    {
      // matcher as a plain object
      props: {
        size: 'small',
      },

      // CSS as an object
      style: {
        fontSize: 12,
        '&:hover': {
          transform: 'scale(1.1)',
        }
      }
    }
  ],
})

// Ex. 2, accessing to `theme.vars`
styled('button')(({ theme }) => ({
  variants: [
    {
      props: {...},
      style: {
        fontSize: theme.vars.fontSize,
      }
    }
  ],
}))

The props of each variant supports callback syntax to create complex matcher with internal state (ownerState).

// Ex. 1
styled('button')({
  variants: [
    {
      // matcher as a plain object
      props: (ownerState) => !ownerState.disabled,

      // CSS as an object
      style: {
        background: 'tomato',
      }
    }
  ],
})

Each variant style will be created at build time and injected into the component via className when the condition matched.

.hashed-component_variant-1 {
  font-size: 12px;
}
.hashed-component_variant-1:hover {
  transform: scale(1.1);
}

.hashed-component_variant-2 {
  background: tomato;
}

<button className={clsx(ownerState.size === 'small' && 'hashed-component_variant-1', !ownerState.disabled && 'hashed-component_variant-2')}>

::: ⚠️ Warning

ownerState cannot be accessed in the root callback.

// ❌ Error
styled('button')(({ ownerState }) => ({
  variants: [
    {
      props: {...},
      style: {
        fontSize: ownerState.fontSize,
      }
    }
  ],
}))

:::

Dynamic styles

To style component based on infinite values (e.g. width, height, ratio), pass callback as a value to the CSS property.

// Ex. 1
styled('button')({
  width: ({ ownerState }) => ownerState.width,
  height: ({ ownerState }) => {
    if (ownerState.height === 'auto') {
      return 300
    }
    return typeof ownerState.height === 'number' ? `${ownerState.height}px` : 0
  },
})

The dynamic styles will be transpiled into vars object and inject as a prop to the component,

.hashed-component {
  width: var(--hashed-var1);
  height: var(--hashed-var2);
}

// internal implementation
<button className="hashed-component" style={{
  '--hashed-var1': ({ ownerState }) => ownerState.width,
  '--hashed-var2': ({ ownerState }) => {
    if (ownerState.height === 'auto') {
      return 300
    }
    return typeof ownerState.height === 'number' ? `${ownerState.height}px` : 0
  },
}}>

::: ⚠️ Warning

theme cannot be accessed in dynamic styles.

// ❌ Error
styled('button')(({ theme }) => ({
  width: ({ ownerState }) => theme.vars.width,
}))

:::