[React] styled-components , styled-reset

 

React 코드를 짜다보면 기본 CSS margin값 들이 들어있는 경우가 있다.

문제상황 

위쪽에 마진값때문에 header 영역이 위 끝에 공간을 남기고 있는 현상이 발견됬다. 

styled-components 는 JS in CSS 방식이기 때문에 

따로 CSS 영역이 없어서 * { margin : 0 ; padding : 0 } 이런식이 안되기 때문에 

다른 방법이 있다.

1. styled-components 설치 

npm install --save styled-components

2. styled-reset 설치

npm i styled-reset

3. GlobalStyles.js 파일 만들어서 reset을 이용해서 초기화 시켜준다.

 

1. GlobalStyles.js 파일 생성 

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyles = createGlobalStyle`
  ${reset}
`

export default GlobalStyles;

2. GlobalStyles.js 를 임폴트 해서 사용한다.

import React from 'react'
import Header from '../components/Header'
import Notes from '../components/Notes'
import { Link } from 'react-router-dom'
import GlobalStyles from '../components/Styles/GlobalStyles'
export default function Home() {
  return (
    <>
      <GlobalStyles />
      <Header />
      <Notes />
      <Link to={'/form'}>글쓰기</Link>
    </>
  )
}

 

 

 

위에 마진값이 0이 되어있다.