How to fix Invalid className or CSS property in React

ReactBEGINNERLOWUpdated Dec 8, 2025· 155 views

React throws warnings about invalid DOM properties when you use HTML "class" instead of "className", or when inline styles use hyphenated CSS property names instead of camelCase. This error stems from JSX being JavaScript syntax where certain keywords are reserved.

Quick fix

Fixes Invalid className or CSS property

<div class="container">
  <button class="btn btn-primary">Click me</button>
</div>
  1. Replace all class attributes with className
  2. Convert inline style properties to camelCase
  3. Fix related reserved keyword issues
  4. Enable ESLint rules to catch these errors
react — error
<div class="container">
  <button class="btn btn-primary">Click me</button>
</div>
Invalid className or CSS property

What this error means

This error actually encompasses two related warnings in React: 1. **"Invalid DOM property `class`. Did you mean `className`?"** - This occurs when you use the HTML `class` attribute in JSX instead of React's `className` prop. Since JSX is syntactic sugar for JavaScript and "class" is a reserved keyword in JavaScript (used for ES6 classes), React requires the `className` prop to avoid conflicts. 2. **"Unsupported style property [property-name]. Did you mean [camelCaseProperty]?"** - This warning appears when inline styles use hyphenated CSS property names (like "background-color" or "min-height") instead of camelCase versions (backgroundColor, minHeight). React's style attribute accepts a JavaScript object with camelCased properties rather than CSS strings. Both warnings indicate that you're using standard HTML/CSS syntax in JSX, which requires JavaScript-compatible naming conventions. React will still attempt to render the component, but these warnings signal incorrect usage that may cause unexpected behavior or fail in future React versions.

Typical symptoms

  • Console warning: "Invalid DOM property `class`. Did you mean `className`?" appears during development
  • Console warning: "Unsupported style property [name]. Did you mean [camelCaseName]?" when using inline styles
  • CSS classes not applying correctly to elements despite being defined in stylesheets
  • Inline styles rendering incorrectly or being ignored by the browser
  • Browser DevTools show unexpected DOM attributes or missing style properties
  • ESLint or TypeScript errors highlighting invalid JSX attribute usage
  • Components render but styling appears broken or incomplete

Common causes

  1. Using HTML "class" attribute instead of React's "className" prop in JSX elements
  2. Copy-pasting HTML markup directly into JSX without converting class to className
  3. Using hyphenated CSS property names in inline style objects (e.g., style={{ background-color: "red" }})
  4. Migrating from plain HTML/JavaScript to React without updating attribute naming conventions
  5. Using template literals or string-based styles instead of JavaScript objects for inline styles
  6. Third-party components or libraries passing "class" prop instead of "className"
  7. Using "for" attribute on labels instead of "htmlFor" (related reserved keyword issue)
  8. Forgetting that JSX requires camelCase for multi-word DOM properties like tabIndex, readOnly

How to fix "Invalid className or CSS property"

1Replace all class attributes with className

Search your codebase for class= usage in JSX files and replace with className=:

Before (incorrect):

jsx
<div class="container">
  <button class="btn btn-primary">Click me</button>
</div>

After (correct):

jsx
<div className="container">
  <button className="btn btn-primary">Click me</button>
</div>

For dynamic classes, use template literals or the classnames library:

jsx
// Template literal approach
<div className={`container ${isActive ? 'active' : ''}`}>

// Using classnames library
import classNames from 'classnames';
<div className={classNames('container', { active: isActive })}>
2Convert inline style properties to camelCase

Transform all hyphenated CSS properties in inline styles to camelCase JavaScript syntax:

Before (incorrect):

jsx
<div style={{ background-color: '#fff', font-size: '16px', min-height: '100px' }}>
  Content
</div>

After (correct):

jsx
<div style={{ backgroundColor: '#fff', fontSize: '16px', minHeight: '100px' }}>
  Content
</div>

Common conversions:
- background-color → backgroundColor
- font-size → fontSize
- border-radius → borderRadius
- z-index → zIndex
- margin-top → marginTop

3Fix related reserved keyword issues

Replace other HTML attributes that conflict with JavaScript reserved words:

Label elements - for → htmlFor:

jsx
// Before
<label for="username">Username</label>

// After
<label htmlFor="username">Username</label>

Other common conversions:
- tabindex → tabIndex
- readonly → readOnly
- maxlength → maxLength
- cellspacing → cellSpacing
- colspan → colSpan

4Enable ESLint rules to catch these errors

Install and configure eslint-plugin-react to automatically detect invalid DOM properties:

bash
npm install --save-dev eslint-plugin-react

Add to your .eslintrc.json:

json
{
  "extends": ["plugin:react/recommended"],
  "rules": {
    "react/no-unknown-property": "error"
  }
}

This rule will flag usage of class, for, and other invalid DOM properties in JSX, catching errors during development before they reach the browser.

5Use TypeScript for compile-time validation

TypeScript will catch invalid prop names at compile time if you use proper React types:

tsx
import React from 'react';

// TypeScript will error on 'class' prop
const MyComponent: React.FC = () => {
  return <div class="container">Content</div>; // ❌ Type error
};

// Correct usage
const MyComponent: React.FC = () => {
  return <div className="container">Content</div>; // ✅ Valid
};

For inline styles, TypeScript enforces camelCase properties through the React.CSSProperties type:

tsx
const styles: React.CSSProperties = {
  backgroundColor: '#fff', // ✅ Valid
  'background-color': '#fff' // ❌ Type error
};
6Audit third-party components

If warnings persist after fixing your code, check if third-party libraries are passing invalid props:

jsx
// Some libraries might accept 'class' prop and need updating
<ThirdPartyComponent class="custom" /> // Check library docs

// Most modern libraries use className
<ThirdPartyComponent className="custom" />

Check the library's documentation or GitHub issues. If the library passes class internally, consider:
- Updating to the latest version
- Filing an issue with the maintainers
- Using a wrapper component to intercept and convert props
- Switching to a more actively maintained alternative

7Use code search to find all occurrences

Systematically find and fix all instances using grep or your editor's search:

VS Code search regex:
- Search for: class=["']
- Replace with: className=

Command line search:

bash
# Find all files with class= in JSX
grep -r 'class=' src/ --include="*.jsx" --include="*.tsx"

# Find inline styles with hyphens
grep -r 'style={{[^}]*-[^}]*}}' src/ --include="*.jsx" --include="*.tsx"

Bulk replacement with sed (backup first!):

bash
# Replace class= with className= in all JSX files
find src -name "*.jsx" -o -name "*.tsx" | xargs sed -i 's/class=/className=/g'

Advanced notes

Vendor Prefixes: For vendor-prefixed CSS properties, React requires camelCase with the vendor prefix capitalized (except for -ms- which stays lowercase): WebkitTransform, MozTransition, msFlexbox.

CSS Variables: CSS custom properties (variables) are an exception - they retain their hyphenated format in inline styles: style={{ '--main-color': '#0066cc' }}.

CSS-in-JS Libraries: Libraries like styled-components, Emotion, or Tailwind CSS handle this conversion automatically. If you're using CSS-in-JS, you can use standard CSS syntax within styled template literals.

React Native Differences: React Native components use style prop exclusively (no className) and requires all properties in camelCase, but may support different CSS properties than React DOM.

SVG Attributes: SVG elements in React also require camelCase for multi-word attributes: strokeWidth, fillOpacity, viewBox (note: viewBox has lowercase 'v' but uppercase 'B').

Prevention Strategy: Set up pre-commit hooks with ESLint to catch these issues before they're committed. Use Prettier with React-specific formatting rules to automatically convert attributes during code formatting.

Frequently asked questions

What does "Invalid className or CSS property" mean?
This error actually encompasses two related warnings in React: 1. "Invalid DOM property class. " - This occurs when you use the HTML class attribute in JSX instead of React's className prop.
How do I fix "Invalid className or CSS property"?
React throws warnings about invalid DOM properties when you use HTML "class" instead of "className", or when inline styles use hyphenated CSS property names instead of camelCase. This error stems from JSX being JavaScript syntax where certain keywords are reserved.
What causes "Invalid className or CSS property"?
Using HTML "class" attribute instead of React's "className" prop in JSX elements Copy-pasting HTML markup directly into JSX without converting class to className Using hyphenated CSS property names in inline style objects (e.g., style={{ background-color: "red" }})
Is the "Invalid className or CSS property" error serious?
It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading