[에러핸들링] styled component 전역 스타일링(Global Style)

의도

import { Container } from "./App.styled.js";
import Nav from "./components/Nav";
function App() {
  return (
      <Container>
        <Nav />
      </Container>
  );
}

export default App;

• App Component에 전역 스타일링을 다음 과 같이 하려고 한다.

  body {
    background-color: #040714;
    color: #f9f9f9;
    font-family: Avenir-Roman, sans-serif;
    margin: 0;
    padding: 0;
  }
  a {
    color: #f9f9f9;
    text-decoration: none;
  }

문제 발생

• Styled Component 에서 전역 스타일링을 하기 위한 방법으로 새로운 Styled Component A를 만들어 최 상위 컴포넌트로 만들면 되지 않을까 예상했지만, 권장사항이 아니었다.

import { Container } from "./App.styled.js";
import Nav from "./components/Nav";
function App() {
  return (
    <A>
      <Container>
        <Nav />
      </Container>
    <A/>
  );
}

export default App;

문제 해결

1. 컴포넌트 레벨 스타일링 과 애플리케이션 레벨 스타일링 을 구분해야한다.
   • 컴포넌트 레벨 스타일링이란?
     말 그대로, 개별 컴포넌트 단위로 스타일을 하는 것을 말한다.
     예를 들어, 위 App Component는 Container, Nav(Nav 컴포넌트 내 NavWrapper, Logo styled component 가 있다.) 컴포넌트는 각각 HTML 엘리먼트를 스타일하고 있다.
     styled component 는 이렇게 컴포넌트 단위로 적용한 스타일을 외부와 완전히 격리시켜 해당 컴포넌트 내부에서만 유효하도록 제한한다.
     
   • 애플리케이션 레벨 스타일링이란?
     간단하게, 모든 컴포넌트에 동일하게 적용되는 스타일을 하는 것을 말한다.
     예를 들어, 브라우저에 상관없이 일괄적인 스타일을 적용하기 위해 사용하는 CSS 정규화나 CSS 초기화를 예로 들수 있다.
     이처럼, 여러 컴포넌트에 걸쳐 통일된 스타일은 Body 엘리먼트에 정의해 사용하기도 한다.
2. 애플리케이션 레벨 스타일링 방법

• 애플리케이션 레벨 스타일을 지원하기 위해서 Styled Components는 createGlobalStyle()라는 함수를 제공한다.
• createGlobalStyle() 함수를 사용하여 의도한 전역 스타일을 적용한다.

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

export const GlobalStyle = createGlobalStyle`
  body {
    background-color: #040714;
    color: #f9f9f9;
    font-family: Avenir-Roman, sans-serif;
    margin: 0;
    padding: 0;
  }
  a {
    color: #f9f9f9;
    text-decoration: none;
  }
`

주의 사항!

• createGlobalStyle() 함수로 생성한 전역 스타일 컴포넌트를 애플리케이션의 최 상위 컴포넌트에 추가해주면 하위 모든 컴포넌트에 스타일이 적용된다.
• 그러나, 최 상위 컴포넌트로 감싸주면 될 것이라 생각하고, 다음과 같이 작성하였으나, 의도대로 적용되지 않았다.

import { Container, GlobalStyle } from "./App.styled.js";
import Nav from "./components/Nav";
function App() {
  return (
    <GlobalStyle>
      <Container>
        <Nav />
      </Container>
    </GlobalStyle>
  );
}

export default App;

• 이유는, 전역 스타일 컴포넌트 내부로 하위 컴포넌트를 포함시키는 것이 아니라, 최 상위 컴포넌트로 전역 스타일 컴포넌트를 추가해주기만 하면 됐다.

import { Container, GlobalStyle } from "./App.styled.js";
import Nav from "./components/Nav";
function App() {
  return (
    <>
      <GlobalStyle />
      <Container>
        <Nav />
      </Container>
    </>
  );
}

export default App;

Styled Components 전역 스타일링 (Global Style)