[React] CSS module로 스타일링하기

react

리액트에서 css module을 이용해서  컴포넌트 별로 스타일을 지정해 줄 수 있다. 

1. MainNavigation.module.css 파일 만들기 

먼저 css를 적용하고 싶은 컴포넌트 주변에 컴포넌트와 이름이 같고. module.css를 확장자로 가지는 파일을 만든다. 

//MainNavigation.module.css

.header {
  width: 100%;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #77002e;
  padding: 0 10%;
}

.logo {
  font-size: 2rem;
  color: white;
  font-weight: bold;
}

.header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
}

.header li {
  margin-left: 3rem;
}

.header a {
  text-decoration: none;
  font-size: 1.5rem;
  color: #fcb8d2;
}

.header a:hover,
.header a:active,
.header a.active {
  color: white;
}

.badge {
  background-color: #cc2062;
  color: white;
  border-radius: 12px;
  padding: 0 1rem;
  margin-left: 0.5rem;
}

 

2. js파일에서 .module.css 불러오기!! 

//MainNavigation.js

import { Link } from 'react-router-dom'

import classes from './MainNavigation.module.css'

function MainNavigation() {
  return <header className={classes.header}>
    <div className={classes.logo}>React Meetups</div>
    <nav>
      <ul>
        <li><Link to='/'>All Meetups</Link></li>
        <li><Link to='/new-meetup'>Add New Meetup</Link></li>
        <li><Link to='/favorites'>My Favorites</Link></li>
      </ul>
    </nav>

  </header>
}

export default MainNavigation;

className을 지정해주면 적용이된다!!