React에서 조건부로 CSS를 렌더링하는 3가지 방법

npx create-react-app my-app
cd my-app
npm start

방법 1:

통사론

{[ your_class_name]: conditon}

예시

clsx 설치

npm install clsx

import styles from "./styles.module.css";
import clsx from "clsx";

export default function App() {
  let title = true;
  return (
    <div className="App">
      <h1 class={clsx(styles.baseText, { [styles.heading]: title })}>
        Sample Heading
      </h1>
      <h1 class={styles.description}>Here goes description</h1>
    </div>
  );
}

.baseText {
  font-size: 20px;
  color: yellow;
}

.heading {
  font-size: 28px;
  color: red;
}

.description {
  font-size: 18px;
  color: aqua;
}

링크

방법 2:

통사론

conditon && yourstyle

import styles from "./styles.module.css";
import clsx from "clsx";

export default function App() {
  let title = true;
  return (
    <div className="App">
      <h1 class={clsx(styles.baseText, title && styles.heading)}>
        Sample Heading
      </h1>
      <h1 class={styles.description}>Here goes description</h1>
    </div>
  );
}

.baseText {
  font-size: 20px;
  color: yellow;
}

.heading {
  font-size: 28px;
  color: red;
}

.description {
  font-size: 18px;
  color: aqua;
}

방법 3:

통사론

{`${condition}` ? "classname_1" : "classname_2"}

예시

import "./styles.css";

export default function App() {
  let title = true;
  return (
    <div className="App">
      <h1 class={`${title}` ? "heading" : "baseText"}>Sample Heading</h1>
      <h1 class="description">Here goes description</h1>
    </div>
  );
}

.baseText {
  font-size: 20px;
  color: yellow;
}

.heading {
  font-size: 28px;
  color: red;
}

.description {
  font-size: 18px;
  color: aqua;
}

결과