React Js - Global CSS 설정 + styled reset

React Js - Global CSS 설정 + styled reset

1. css 초기화를 위해 styled-reset 설치

2. styled-components는 local로 동작하기 때문에 global 한 css 를 만들기 위해 GlobalStyles.js 생성

• 설치

   yarn add styled-reset

• 사용

  Components/GlobalStyles.js

   import { createGlobalStyle } from "styled-components";
   import reset from "styled-reset";
   ​
   const globalStyles = createGlobalStyle`
       ${reset};
       a{
           text-decoration:none;
           color:inherit;
       }
       *{
           box-sizing:boerder-box;
       }
       body{
           font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
           font-size: 14px;
           background-color:rgba(20,20,20,1);
       }
   `;
   ​
   ​
   export default globalStyles;

  Components/App.js

   import React, { Component } from "react";
   import Router from "Components/Router";
   import GlobalStyles from "Components/GlobalStyles";
   ​
   class App extends Component {
     render() {
       return (
         <>
           <Router />
           <GlobalStyles />
         </>
       );
     }
   }
   ​
   export default App;

• 
  

출처 : https://academy.nomadcoders.co/