[React] GlobalStyles(전역 스타일링)

1. 개요

 

import styled from "styled-components";

function TestPage(props) {

    return (

        <Wrapper>

            <Title>{props.Title}</Title>

            <Contents>{props.Contents}</Contents>

        </Wrapper>

    );

}

const Wrapper = styled.div`

    border : 1px solid black;

    border-radius: 15px;

    padding : 20px;

    margin : 16px auto;

    max-width: 400px;

`;

const Title = styled.h1`

    font-family: 'Courier New', Courier, monospace;

    font-size: 1.5rem;

    margin: 0;

    margin-bottom: 8px;

    line-height: 1.5;

`;

const Contents = styled.p`

    margin: 0;

    font-family: 'Courier New', Courier, monospace;

    line-height: 1.5;

    font-size: 1rem;

`;

export default TestPage;

이러한 예시 코드가 있다고 하였을 때 Wrapper 태그 안에 있는 Title과 Contents의 경우 적용한 css가 겹치는 요소가 많다.

font-family: 'Courier New', Courier, monospace;

 margin: 0;

 line-height: 1.5; 

이러한 공통적인 부분을 전역 스타일 jsx 파일을 생성한 후에

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`

    body {

        font-family: 'Courier New', Courier, monospace;

        font-size: 1.5rem;

        margin: 0;

        line-height: 1.5;

        color: red;  

    }

`;

export default GlobalStyle;

위 코드와 같이 createGlobalStyle와 styled-components 구문을 활용하여 const GlobalStyle라는 스타일을 생성해준다.

export default GlobalStyle;

위 코드를 통해 GlobalStyle이라는 styled-components 변수가 export 되었기 때문에 

import React from 'react';

import TestPage from "./components/TestPage";

import "./App.css";

import GlobalStyle from './Global';

const App = () => {

  return (

    <>

    <GlobalStyle></GlobalStyle>

    <TestPage Title = "제목입니다" Contents ="내용입니다"/>

    </>

  )

}

export default App;

import TestPage from "./components/TestPage";

  <GlobalStyle></GlobalStyle>

위 코드를 통해 GloabalStyle을 import 받아 적용 시켜 준다.