Styled Components - 4

• 전역 스타일 설정하기

1. 전역 스타일을 설정하기 위해 Styled Components에서 createGlobalStyle 함수를 불러온다

파일명:GlobalStyle.js

import { createGlobalStyle } from "styled-components";

const 전역_스타일_이름 = createGlobalStyle`
  button {
    padding : 5px;
    margin : 2px;
    border-radius : 5px;
  }
`;

export default 전역_스타일_이름;

2. GlobalStyle 컴포넌트를 최상위 컴포넌트에서 사용해주면 전역에 GlobalStyle 컴포넌트의 스타일이 적용

import 이름은_아무거나_전역 from "./GlobalStyle"; //<-파일명만 같으면 import 됨!

//받아온 prop에 따라 조건부 렌더링이 가능합니다.
const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};

`;

export default function App() {
  return (
    <>
      <이름은_아무거나_전역 />  //<-전역 스타일 컴포넌트다!
      <Button1 >Button1</Button1>
      <Button1 skyblue>Button1</Button1>
    </>
  );
}