본문 바로가기

React JS/Lecture

React - CSS - reset,createGlobalStyles

React - CSS - reset,createGlobalStyles

#1.리셋css 넣고,글로벌 스타일 넣으면 된다.

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

const globalStyles = createGlobalStyle`
    ${reset}
    a{
        text-decoration:none;
        color:inherit;
    }
    *{
        box-sizing:border-box;
    }
    body{
        font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size:16px;
    }
`;

export default globalStyles;

 

#2.  적용은 root부분( 엔트리 포인트 )에 감싸주면 끝!

import React from "react";
import Router from "./Router";
import GlobalStyles from "./GlobalStyles";
function App() {
  return (
    <>
      <Router />
      <GlobalStyles />
    </>
  );
}
export default App;

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA