Styled-components로 CSS 덮어쓰기 (feat.createGlobalStyle)

내가 만든 css 파일이라면 쉽게 변경이 가능하겠지만, 라이브러리의 css 를 건드려야하는 경우가 있을 수 있다.

 

이미 다음과 같은 css 모듈 파일이 있다고 하자. 이 css 가 라이브러리의 css 라고 생각을 해보자.

.App {
  font-family: sans-serif;
  text-align: center;
  color: blue;
}

 

다음과 같은 화면을 볼 수 있었다.

 

다음처럼 createGlobalStyle 을 사용해서 styled-components 를 사용해서 css 를 적용할 수 있다.

import "./styles.css";
import { createGlobalStyle } from "styled-components";

const Global = createGlobalStyle`
  .App {
    color: red !important
  }
`;

export default function App() {
  return (
    <div className="App">
      <Global />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

 

 createGlobalStyl는 보통은 어플리케이션 레벨에서 공통적으로 주어야할 css 를 다룰때 사용하는듯 하다.

예를 들자면, body{} 에 공통적인 글꼴을 적용한다던지 말이다.