How to set a class Name in React? (ie html class attribute)


In HTML, the attribute property of an element is class, but in React, the attribute key is className.

How to conditionally set a class

With the conditional statement

return (
    className={`Button-root ${disabled ? 'Mui-disabled' : ''} ${selected ? 'selected' : ''}`}

With library

With the clsx or obj-str, you can build conditional className

Example with clsx, instead of writing conditional statements, you would write

import clsx from 'clsx';

return (
    className={clsx('uiButton-root', {
      'ui-disabled': disabled,
      'ui-selected': selected,

Discover More
How to import Svg into React (Manually and with SvgR)?

This page shows you how you can show Svg in React. The problem is that Raw Svg are not natively React component and therefore cannot be added to the React tree directly. URL The Javascript world is...
React - HTML element (Built-In)

In React, HTML elements are built-in React elements of the React DOM tree that wraps a HTML element They start with a lowercase letter whereas the component (React Element created by yourself or a library)...
React Props Chrome Plugin
React - Props

props is the only object argument passed from a component to another component. Props are similar to State, but is public and not fully controlled by the component. You can also pass arguments to...

Share this page:
Follow us:
Task Runner