[React] createGlobalStyle 사용해서 기존CSS 덮어쓰기.

[React] 전역 스타일링  - createGlobalStyle

---

안녕하세요. 이번 포스팅에서는 

Styled-Components에서 제공하는 함수인 createGlobalStyle 함수에 대해 알아보겠습니다.

 

리액트에서, 

   - 전역적으로 CSS를 사용하고 싶을 경우,

   - 기존 CSS를 덮어쓰고 싶을 경우 ( 컴포넌트 자식Class의 CSS 변경할 때 등 )

 

createGlobalStyle을 사용해서 전역적 스타일링, CSS덮어씌우기 등의 작업을 할 수 있습니다.

 

예시 코드를 통해 사용방법을 알아봅시다.

예시 코드에서는 createGlobalStyle을 사용해서,  Slick컴포넌트의 자식Class인 slick-slide의 CSS를 덮어 씌어주고 있습니다. 

import Slick from "react-slick";
import styled, { createGlobalStyle } from "styled-components";
const ImagesZoom = () => {
  // slick-slide 는 Slick컴포넌트에 포함되어 있는 class입니다.
  const Global = createGlobalStyle`
    .slick-slide {
      display: inline-block;
    };
  `
  // <Global/>을 덮어쓰고 싶은 CSS가 있는 컴포넌트 상단에 위치시켜줍니다.
  return (
    <>
      <Global/>
      <Slick/>
    </>
  );
};

export default ImagesZoom;

 

제가 이용한 방법 이외에도, createGlobalStyle을 사용해 특정 컴포넌트들에 전역적 스타일링을 하는 등 

다양한 방법으로 활용 할 수 있을 것 같습니다.

 

---

좀 더 자세한 사용방법을 알고 싶으신 경우, 아래링크를 참고해주세요.

https://styled-components.com/docs/api#createglobalstyle

 

---

감사합니다.