리액트에서 CSS는 3가지 방법으로 작성할 수 있다

• 인라인

인라인 방법은 기존 html파일에서 css를 적용하는 것과는 다르게 객체형식으로 해야한다. 예를 들면

style = {{

color : blue;

}}

위와 같이 중괄호를 한 번 더 해야한다.

• CSS파일 따로

따로 만들어서 할 경우 기존과 같이 하되 .box{color=blue} 와 같이 작성했을 경우

<div>className=”box”</div>

위와 같이 이용한다는 것만 다르다. 다만 주의해야할 것은 이 방식의 경우 특정 js파일에 지정해서 하는게 아닌 모든 파일에 영향을 주므로 오버라이딩에 주의해야 한다.

• module.css 이용

hello.module.css 파일을 따로 만들어 이용할 경우 CSS를 적용할 파일을 따로 지정할 수 있다.

import styles from “./hello.module.css’;

위의 import코드를 작성한 뒤 태그 안에

<div className={styles.box}><div> 와 같이 작성해야한다.