React에서 css 적용하기

🔶 jsx코드에 직접 적용하기

function App(){
return <h1 style={{ fontSize: "18px", color: "red"}}>title</h1>
}

🔶 CSS Module

1. Button.module.css (css파일을 모듈화 함)

: css파일을 module로 해서 필요한 여러곳에 갖다 쓸 수 있음.
: css파일명에 module을 붙여주면 모듈화 됨.

/* Button.module.css */
.divEl {
  background-color: skyblue;
}

.btnEl {
  background-color: red;
}

.

2. Button.js (필요한 컴포넌트에서 css를 가져와 사용함)

1) 모듈화 된 css 파일을 import함.

2) css 클래스들을 한 변수명(styles)으로 받아 필요한 클래스명만 사용할 수 있음.

: create-react-app은 css코드를 javascript의 obj로 변환시켜 줌.

styles = {
	 divEl: { background-color: skyblue} ,
 	 btnEl:{  background-color: red} 
}
 → 이걸 리액트코드에서 styles.btnEl 이렇게 쓸 수 있음.

3) 사용코드

// 1. import로 모듈파일 가져옴
import styles from "./Button.module.css";

function ButtonApp() {
  return (
    <>
// 2.className = {styles.divEl} 으로 필요한 css 클래스네임 적용
      <div className={styles.divEl}> hello</div>
      <button type="buttun" className={styles.btnEl}>
        click
      </button>
    </>
  );
}

export default ButtonApp;

🔶 styled component사용

• 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 됨.