DEV Community

Cristian Sifuentes
Cristian Sifuentes

Posted on

Demystifying `className` in React: HTML Attributes, TypeScript, and Styling Mastery

#react #typescript #frontend #programming

Demystifying className in React

Demystifying className in React: HTML Attributes, TypeScript, and Styling Mastery

In modern React development, integrating UI styles with precision is key. Whether you're building reusable components or working in strict TypeScript environments, understanding how React handles DOM attributes—especially className—is essential.

In this post, we’ll explore the meaning behind:

(property) React.HTMLAttributes<T>.className?: string | undefined
Enter fullscreen mode Exit fullscreen mode

and walk through how it fits into React’s JSX syntax, TypeScript definitions, and DOM rendering.

What is className in React?

In standard HTML, elements are styled using the class attribute:

<div class="container">Hello World</div>
Enter fullscreen mode Exit fullscreen mode

But in React, we write:

<div className="container">Hello World</div>
Enter fullscreen mode Exit fullscreen mode

Why the difference? Because class is a reserved word in JavaScript, and JSX is syntactic sugar for JavaScript. React maps className to class under the hood during rendering.

Why className Instead of class?

  • ✅ Avoids collision with JS class keyword.
  • ✅ Consistent with JavaScript naming conventions (camelCase).
  • ✅ Required for JSX compilation to work properly.

TypeScript Typings: React.HTMLAttributes<T>

The React type:

(property) React.HTMLAttributes<T>.className?: string | undefined
Enter fullscreen mode Exit fullscreen mode

Means:

  • className is optional (?).
  • It must be a string or undefined.
  • It's a property defined on the interface HTMLAttributes<T>—used internally by React when inferring props for native HTML elements (e.g. div, span, etc).
  • It ensures strict typing when building components using TypeScript.

Practical Example 

import React from 'react';

export const StyledCard = () => {
  return (
    <div className="card bg-light p-3">
      <h3 className="card-title">React + TypeScript</h3>
      <p className="card-body">This card uses className for styling.</p>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

If you hover over className in a TypeScript editor, you’ll likely see:

(property) className?: string | undefined
Enter fullscreen mode Exit fullscreen mode

Advanced Usage with Custom Components

You can also pass className into reusable components and apply them via props:

interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
  label: string;
}

const MyButton = ({ label, className, ...rest }: ButtonProps) => {
  return (
    <button className={`btn ${className}`} {...rest}>
      {label}
    </button>
  );
};

// Usage
<MyButton label="Click Me" className="btn-primary mt-2" />
Enter fullscreen mode Exit fullscreen mode

This usage relies on extending React.HTMLAttributes<T> to inherit HTML props like onClick, className, etc.

Common Pitfalls

Mistake Fix
Using class in JSX Always use className
Forgetting to forward props Spread ...rest in your JSX element
Using className on custom tags Make sure your component passes it down
Typing className as any Use React.HTMLAttributes<T> or string?

Conclusion

Understanding className in React is more than syntax—it's about:

  • Type safety in TypeScript
  • Best practices in JSX
  • Reusability in styled components

Knowing that className is defined on React.HTMLAttributes<T> gives you the power to build more robust, type-safe, and customizable UI components in React.

Tags: react typescript jsx classname frontend htmlattributes

Top comments (0)