Skip to main content

Dynamic styles with CSS custom properties

00:00:03:20

Values and states

A dynamic style usually represents a value or a state. Values include a progress percentage, a position, or a delay. States include whether a control is expanded, disabled, or loading.

A custom property can carry a value from React into a CSS rule:

jsx
<div className={styles.progress} style={{ '--progress': `${progress}%` }} />
css
.progress {
  width: var(--progress, 0%);
  background: var(--primary);
}

Validate values before using them: a percentage control should stay within its intended range.

Keep state meaningful

For an expandable control, aria-expanded communicates its state to assistive technology and can also select the visual treatment:

css
button[aria-expanded='true'] {
  border-color: var(--primary);
}

The attribute describes state; it does not implement keyboard navigation, focus management, or the behavior of the expanded content. Those still need to be implemented and checked.

Make the defaults usable

Give custom properties fallbacks where a missing value would hide essential content. Keep a visible focus indicator and respect reduced-motion preferences when adding transitions. Layout and readability should survive without an entrance animation.