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

About

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 (
  <div
    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 (
  <div
    className={clsx('uiButton-root', {
      'ui-disabled': disabled,
      'ui-selected': selected,
    })}
  />
);