반응형
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;
}
참고하면 좋을 포스팅 :
반응형
'웹 > (React)리액트' 카테고리의 다른 글
(React) 리액트 Todo List + 색깔 바꾸기 기능 추가/ 작은 프로젝트 (0) | 2021.08.28 |
---|---|
(React) 아이콘 사용하기 (상세 설명) (0) | 2021.08.26 |
CSS Module: css 클래스 이름 중첩 방지법/ CSS Module사용 이유 (0) | 2021.08.25 |
(React) useMemo와 useCallback 사용법 (0) | 2021.08.24 |
(React) useReducer 사용법 / useReducer와 이벤트 함께 사용하기 (0) | 2021.08.24 |
댓글