ClassName 2개 적용하기

---

ClassName 2개 적용하기

---

포스팅 요약

1. css Module이 아닐때 

2. css Module일 때

1) 첫 번째 방법

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;
}

 

---

 

참고하면 좋을 포스팅 : 

2023.07.11 - [웹/(React)리액트] - (React)리액트 클래스에 조건문/리액트에서 클래스 다양한 방법으로 사용해보기/클래스명 여러개/className 여러개 일때/클래스에 변수 사용하기

(React)리액트 클래스에 조건문/리액트에서 클래스 다양한 방법으로 사용해보기/클래스명 여러개/