리액트에서 css 작성하는 4가지 방법

ooz·2021년 5월 3일
0

스터디

목록 보기
3/18
  1. 인라인: 특별한 이유가 없는 한 인라인으로 작성하지는 않는다고..
<div style={{
  color: 'purple', 
  fontSize: '20px', 
  opcacity: 0.8
}}>
  yay!
</div>
  1. 기존의 css파일 사용하기 (index.css, App.css 같은 것)
    • create-react-app으로 프로젝트 작성하면 생성되는 index.css, App.css 파일에 작성할 수 있는데 이 경우 클래스 이름이 중복되어 내가 의도하지 않았던 곳에도 스타일이 적용될 수 있다.

  1. .module.css
    • 컴포넌트이름.module.css 으로 파일 이름을 작성한다.
    • 컴포넌트 파일에 이 css 파일을 import한다
      import styles from "./Box.module.css"
    • 그리고 아래와 같이 적용한다.
      <div className={styles.css파일의선택자}></div>
  2. css in js
  • styed-components를 import해서 사용한다.
import styled from 'styled-components'

const Box = styled.div`
  background-color: salmon;
  padding: 10px;
`
<Box>hello</Box>
profile
사는 것도 디버깅의 연속. feel lucky to be different🌈 나의 작은 깃허브는 https://github.com/lyj-ooz

0개의 댓글