오늘 노마드코더 강의를 듣다가 styled-components 강의를 듣게 되었는데 very awesome 한 것 같아서 오늘 정리를 해보겠다.

https://youtube.com/playlist?list=PL7jH19IHhOLNUIOJcGj6egl-dNB-QXjEm

유튜브에 있는 무료 강의고 짧은 시간안에 styled-components 기능을 알아보는데에 좋은 것 같다.

1. getStart

우선 설치를 해야된다.

yarn add styled components

그리고 import를 해주면 된다.

import styled from "styled-components";

2. CSS 요소 넣기

NO CSS FILE!
css 파일 없이 js 파일 안에서 css 컴포넌트를 만들어 넣자!

어떻게?

const Button = styled.button`
	background-color: #2ecc71;
    `

Button 컴포넌트를 만들고 styled.button(html element)하고 벡틱으로 감싸고 그 안에 CSS요소 넣어주면 CSS컴포넌트 만들기 끝!
이걸 사용하는 방법은

...
return (
	<Button></Button>
)
};

js컴포넌트 안에 return에서 button대신 넣어주면 끝!

3. injectGlobal

아니 마진, 패딩은 body에서 해야되는데 body로 접근을 어떻게 하나...

이럴때 injectGlobal을 이용한다.
import 부터

import {injectGlobal} from "styled-components";

injectGlobal`
	body{
    	padding: 0;
        margin: 0;
    }
`

그런데... 나는 이게 안먹힌다. 왜지
docs를 보고왔는데 버전 4부터는 없어지고 createGlobalStyle로 대체되었다고 한다.

사용법

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle<{ $whiteColor?: boolean; }>`
  body {
    color: ${props => (props.$whiteColor ? 'white' : 'black')};
  }
`

<React.Fragment>
  <GlobalStyle $whiteColor />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>

4. Extend(연장)

5. Animation(keyframes)

6. CSS 컴포넌트에 props 전달

7. Attributes

8. Mixin

9. Theming

10. Nesting

11. CSS on React Native

-end-