CLSX

• Використовуєтся коли повинно за якимись умовами длодавати або ні різні класи (з різним оформленням) на теги
• CLSX

npm install clsx

import clsx from "clsx";

const className = clsx(
  "first",
  10,
  undefined && "second",
  true && "third",
  false ? "fourth" : "fifth"
);
console.log(className); // "first 10 third fifth"

// src/components/Alert.jsx

import clsx from "clsx";
import "./Alert.css";

const Alert = ({ variant, outlined, elevated, children }) => {
  return (
    <p
      className={clsx(
        "alert",
        variant,
        outlined && "is-outlined",
        elevated && "is-elevated"
      )}
    >
      {children}
    </p>
  );
};