styled-component에서 global style

global style의 필요성

라이브러리를 사용해서 코딩을 하면 위 사진처럼 className이 이미 정해진 상태로 나온다. 이런 태그들의 스타일을 바꾸기 위해서 global style가 필요하다.

사용법

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

createGlobalStyle를 import 해줘야 global style을 사용할 수 있다.

const Global = createGlobalStyle`
    .slick-slide {
      display: inline-block;
    }
`;

위 사진에 있는 "slick-slide"의 이름을 바꾸기 위해서는 이런식으로 스타일링 해줄 수 있다.

<div>
    <Global />
</div>

Global 컴포넌트는 아무 곳에나 넣어주면 global style이 적용된다.