ClassName 2개 이상 적용 방법

1. css Module이 아닐때 

App.js

import React from "react";
import "./App.css";

const App = () => {
  return (
    <div className="container1 container2">
      <h1>I have two Classes</h1>
    </div>
  );
};

export default App;

 

App.css

.container1{
  border: 1px solid black;
  color: white
}
.container2{
  background: blue;
}

 

<결과 화면>

---

2. css Module일 때

1) 첫 번째 방법

App.js

import React from "react";
import styles from "./App.module.css";

const App = () => {
  return (
    <div className={`${styles.container1} ${styles.container2}`}>
      <h1>I have two Classes</h1>
    </div>
  );
};

export default App;

 

App.module.css

.container1{
  border: 1px solid black;
  color: white
}
.container2{
  background: blue;
}

---

2) 두 번째 방법

App.js

import React from "react";
import styles from "./App.module.css";

const App = () => {
  return (
    <div className={[styles.container1, styles.container2].join(" ")}>
      <h1>I have two Classes</h1>
    </div>
  );
};

export default App;

 

App.module.css

.container1{
  border: 1px solid black;
  color: white
}
.container2{
  background: blue;
}

---

연산자가 필요할때

className={ todo.star ? `${styles.TodoObject} ${styles.star}` :  styles.TodoObject}

 

todo.star 값이 true 일때 styles모듈에 있는 TodoObject 와 star 클래스 네임을 부여한다.

                       false 일때 styles모듈에 있는 TodoObject 클래스 네임을 부여한다.

 

---

ClassNamS 라이브러리를 설치하는 방법도 있다.