Styles in REACT

React에서 Styles를 여러 방법으로 사용할 수 있다.

1. styles.css(1파일)

• className이 필요
• index.js에서 import 필요
• 파일이 커지면 관리가 조금 어려움
• 다른 css파일들을 한곳에 import해줘야함

2. 폴더 만들고 구분별로 css를 만들기(header.css ...)

• className이 필요
• 여전히 css는 global이기 때문에 className이 겹치지 않게 해야함.

3. SS MODULE 사용
   className을 임의화 & css가 local (not global)

• header.css -> header.module.css 로 설정
• import styles from "header.css" (header.js에서)
• header.js에서 className={styles.(className)} 설정 -> 임의화 되어 사용됨
• header.module.css -> header.module.scss 사용가능
• 그러나 여전히 className을 알아야함
• className으로 -쓸 수 없음(js에서 불러올 때 문제)

4. THE BEST WAY ! styled-components 사용

• import styled from "styled-components"
• const List = styled.<'tag'>``(백틱안에 style)
• List를 사용 (tag이름대신)
• Link 를 react-router-dom에서 불러와 사용시에는
  const Slink = styled(Link)``방식으로 사용.
• 또한 className이 임의화 됨

styled-components 이용 css reset하기

1. styled-compnents는 local하지만 global하게 사용가능

• npm i styled-reset
• GlobalStyles.js 생성
• import reset from "styled-reset"
• GlobalStyles.js에 { createGlobalStyles } from "styled-components" import한다.

const GlobalStyle = createGlobalStyles`
${reset};
a{
	text-decoration : none;
    color: inherete;
  }
 *{
 box-sizing:border-box;
 }
 body{
 font-family : apple-system.....;
 font-size: 14px;
 background-color:black; 
 }

export default GlobalStyle

• 그리고 app.js에 imoprt한다.

<GlobalStyle />

형식으로.