본문 바로가기
웹/(React)리액트

ClassName 2개 적용하기

by 공부가싫다가도좋아 2021. 8. 26.
반응형

ClassName 2개 적용하기


포스팅 요약

1. css Module이 아닐때 

2. css Module일 때


 

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)리액트 클래스에 조건문/리액트에서 클래스 다양한 방법으로 사용해보기/클래스명 여러개/

포스팅 목차 1. css module사용 X : className 여러개 1-1. 적용된 화면 이미지 2. css module사용 X : className 여러개 + && 조건문 스타일 2-1. 적용된 화면 이미지 3. css module사용 X : className 여러개 + 삼항연산자

eunhee-programming.tistory.com

 

반응형

댓글