OWLOPER

styled-components 사용법 -- 2

April 18, 2020

styled-components 사용법 — 1
styled-components 사용법 — 2
styled-components 사용법 — 3
styled-components — 스타일 확장

createGlobalStyle

전역 스타일을 지정할 수 있는 컴포넌트를 생성하는 함수.
root 파일에 배치하여 컴포넌트가 렌더링될 때 스타일이 지정될 수 있도록 함.

import{ createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    padding:0;
    margin:0;
  }
`

<GlobalStyle />

css

css를 생성하는 함수.

import{ css } from 'styled-components';

const Button = styled.button`
  ${props=>props.white && css`color:${colorWhite}`}

ThemeProvider

ThemeProvider API를 통해, 지정된 스타일을 props로 하위 컴포넌트에 전달함.

import{ ThemeProvider } from 'styled-components';

const theme = {
  mainColor: "#3498db",
}

<ThemeProvider theme={theme}>
  <ButtonCircle></ButtonCircle>
</ThemeProvider>

const ButtonCircle = styled.button`
  border-radius:30px;
  padding:25px 15px;
  background-color:${props => props.theme.mainColor}
`;

breakpoint

반응형 페이지를 만들 때, styled-components에서 breakpoint 사용하는 방법. 패키지 설명서 보기🔍

패키지 설치

npm install styled-components-breakpoint

사용법

import breakpoint from 'styled-components-breakpoint'

const Heading = styled.h1`
  color: #444;
  font-family: sans-serif;
  font-size: 12px;

  ${breakpoint('md')`
    font-size: 16px;
  `}

  ${breakpoint('xl')`
    font-size: 24px;
  `}
`
Written by@[owlssi]
프론트 공부 중입니다.

GitHub