coding develop

CSS 파일

.module.css로 파일 저장

Exampe.module.css

.container {
  background-color: aqua;
  width: 60%;
  height: 300px;
}

.message {
  background-color: brown;
}

Example.js

import React from 'react';
import styles from './Example.module.css'

const Example = () => {

    console.log("styles:" ,styles);
    return (
        <div className={styles.container}>
            <h1 className={styles.message}>css 스타일 입히기</h1>
            <p>CSS Module</p>
        </div>
    );
};

export default Example;

css 파일을 불러오기 위해 import 해줌

import styles from './Example.module.css'

이 때 객체를 하나 전달받는데 CSS Module에서 사용한 클래스 이름과 해당이름을 

고유화한 값이 키-값 형태로 들어 있다.

-> [파일 이름]_[클래스 이름]_[해시 값]

console.log(styles)를 통해 알아보자

파일이름(Example)_클래스 이름(container)_해시 값(3696j)

이렇게 CSS를 불러와서 사용할 때 자동으로 만들어지는데

이는, 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하기 위함이다.

CSS 적용

클래스를 적용하기 싶은 JSX 엘리먼트에

classname={styles.클래스이름} 지정

<div className={styles.container}>
<h1 className={styles.message}>css 스타일 입히기</h1>
     <p>CSS Module</p>
</div>

전역적으로 사용하고 싶으면

:global .container {
  background-color: aqua;
  width: 60%;
  height: 300px;
}

앞에 :global 입력

<div className="container">
<h1 className={styles.message}>css 스타일 입히기</h1>
    <p>CSS Module</p>
 </div>

클래스 이름은 평상시 처럼 문자열로 입력