How to Use CSS Variables in React: Simple Guide

In React, you can use CSS variables by defining them in your CSS files or inline styles and then referencing them in your components. You can also update these variables dynamically using React's state and inline style prop with JavaScript variables.

Syntax

CSS variables are defined with a -- prefix inside a CSS selector, usually :root for global scope. You use them with the var(--variable-name) function. In React, you can apply them in CSS files or inline styles.

Example parts:

• :root { --main-color: #06c; } defines a variable.
• color: var(--main-color); uses the variable.
• In React inline styles, use camelCase and pass a JavaScript object.

css

:root {
  --main-color: #06c;
  --padding: 10px;
}

.myClass {
  color: var(--main-color);
  padding: var(--padding);
}

Example

This example shows how to define CSS variables globally and use them in a React component's inline style. It also demonstrates changing a CSS variable dynamically using React state.

jsx

import React, { useState } from 'react';

export default function ColorBox() {
  const [color, setColor] = useState('#06c');

  const boxStyle = {
    '--box-color': color,
    backgroundColor: 'var(--box-color)',
    color: '#fff',
    padding: '1rem',
    borderRadius: '8px',
    textAlign: 'center',
    cursor: 'pointer'
  };

  const toggleColor = () => {
    setColor(prev => (prev === '#06c' ? '#c60' : '#06c'));
  };

  return (
    <div style={boxStyle} onClick={toggleColor} aria-label="Color box">
      Click me to change color
    </div>
  );
}

Output

A colored box with text "Click me to change color" that toggles background color between blue (#06c) and orange (#c60) when clicked.

Common Pitfalls

Common mistakes when using CSS variables in React include:

• Trying to use CSS variables in inline styles without defining them in the style object.
• Forgetting that inline styles in React are JavaScript objects and require camelCase keys.
• Not updating CSS variables dynamically via React state or refs, leading to static styles.
• Using CSS variables without fallback values, which can cause issues if the variable is undefined.

jsx

/* Wrong: CSS variable used in inline style without defining it */
const styleWrong = {
  backgroundColor: 'var(--my-color)'
};

/* Right: Define CSS variable in style object */
const styleRight = {
  '--my-color': '#f00',
  backgroundColor: 'var(--my-color)'
};

Quick Reference

• Define CSS variables globally in :root or locally in selectors.
• Use var(--variable-name) to access variables in CSS.
• In React inline styles, define CSS variables as keys in the style object with quotes and camelCase.
• Update CSS variables dynamically by changing the style object or CSS custom properties on elements.
• Always provide fallback values in var() if needed, e.g., var(--color, black).

Key Takeaways

Define CSS variables with --prefix in CSS or inline style objects in React.

Use var(--variable-name) to reference CSS variables in styles.

Update CSS variables dynamically by changing React state and passing new style objects.

Remember React inline styles are JavaScript objects with camelCase keys.

Provide fallback values in CSS variables to avoid undefined styles.