Style Component

1. 설치하기

npm i styled-components

2. 사용하는 법

import styled from 'styled-components';

임포트 먼저 해줘요. 근데 자동으로 됨

그리고

const 이름 = styled.htmlTag이름`
	css 코드
`

<이름> </이름>
이렇게 그냥 컴포넌트처럼 사용

확장을 해볼까요옹

1. 같은 박스에 다른 bgColor를 주고싶을 때

-> props로 값을 넘겨주면 됨

2. 다른 컴포넌트의 스타일을 상속하는 새 컴포넌트 만들기

-> styled( )

3. 스타일은 유지 but 다른 엘리먼트를 쓰고 싶을 때

-> as

<Btn>Login</Btn>
<Btn as="a" href="/">
	Login
</Btn>

4. 속성 값 주기

-> attrs

Animations

1. 사용하는 법

import styled, { keyframes } from 'styled-components';

임포트 먼저 해줘요. 근데 자동으로 됨

2. 생성

• 다른 파일에서 같은 이름의 keyframes가 존재하더라도 충돌 나지 않도록

3. 연결

굳

pseudo selector 만들기

target 처리 해주기

<Box>안에 있는 <span>태그의 사이즈를 키우고 싶다!

• 안에다가 써주면 됩니다앙~

태그에 영향을 받고 싶지 않을 때

• 스타일 컴포넌트 자체를 타겟팅 가능

Theme 만들기

styled components는 ThemeProvider를 통해 전체 테마를 지원함

1. 사용하는 법

import { ThemeProvider } from 'styled-components';
임포트 해주세요오

2. 사용

index.js

 <ThemeProvider theme={themeName}>

const darkTheme = {
   textColor: 'whitesmoke',
   backgroundColor: '#111',
};

그럼 만들어진 theme의 props를 어떻게 사용하느냐

저렇게

${(props) => props.theme.propsName};

으로 사용합니다~

• 여러 수준의 깊이에 있는 경우에도 사용 ㄱㄴ!