Table of Contents

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,
    })}
  />
);