[CSS] styled components(basic)

스타일 컴포넌트 유용한 문법 몇가지 정리

 

1) Extending Styles

대부분의 스타일 속성이 같고, 일부만 다르게 표현하고 싶을 경우, 작성된 스타일 컴포넌트를 props값으로 새 스타일 컴포넌트에 전달하고 변경하고 싶은 값만 써주면 확장해서 사용가능.

 

2. as

as 사용하면, 함수를 적용할 수 있음. 

 

 

3. 어떤 컴포넌트에서도 사용가능 

 

4. props 값을 이용해서 상황에 따른 값으로 스타일 설정 가능.

 

5. animation

에니메이션을 key-frame 말고 from to로 설정하면, 글로벌 변수로 선언해준 다음, 여러군데에서 재활용 가능

 

6. GlobalStyle

글꼴이나 페이지 공통 색상 같은 값은 모든 곳에서 활용되어야하기 때문에 효율적으로 관리 하기 위해서는,

ThemeProvider 컴포너트를 사용해서 theme을 설정해주면, 모든 컴포넌트에서 theme에 접근 가능하다. 

 

7. nesting 문법

 

1) & : 모든 인스턴스 선택

2) &.className: 해당 인스턴스 아래에 className을 가진 요소들 

.some {
	&.anno { ~~}
    }

아래와 같이 렌더링 됨.
🔽
.some {
	.some.anno{~~~}
    }

3)

.button{
	&:visited { ~~ } 
  }
  
아래와 같이 렌더링 됨.
🔽
.button:visited{ ~~ }

4) > , +, ~

> :

& > span {

          ~~    }

◼ span의 하위요소 모두

 

+ :

<div>
 <p>hello</p>
 <p>hello!111</p>
 <h2>title</h2>
</div>

& + p : p모든 요소 

 

~ : 

A ~ B

A아래의 B 모두

 

 

출처

🔽

https://styled-components.com/docs/basics

styled-components: Basics