polished와 styled-components 사용해보기

오늘은 어제의 파일을 바탕으로 

polished와 styled-components를 사용해보겠다.

두 속성 다 설치를 해줘야 하니

cd 명령어를 이용해 사용하고자 하는 파일로 이동한다

그 후

npm install polished

npm install styled-components

명령어로 속성을 설치해준다.

StyledButton.js 파일

다음은 polished 속성을 이용하여

darken, lighten을 사용한 예제이다.

또한, styled-components 속성을 통해 js파일 내에서도

css가 사용가능하도록 만들어 주었다.

 

여기서 주의해야 할 점은 25번줄이다.

5번줄에서 선언해 둔 변수 StyledBtn과 

25번줄에서 생성한 함수형 컴포넌트 StyledButton의 이름이 같을 경우

(만일 같은 이름으로 설정했다는 가정 하에)

컴파일러에서 제대로 구분하지 못해

오류가 날 수 있으니

반드시 다른 이름으로 설정해주도록 해야한다.

 

 

App.js 파일

이번에는 styled-components 속성을 이용해

ThemeProvider을 사용한 예제이다.

<ThemeProvider> 태그를 통해

blue, gray, pink를 일종의 변수로 만들어

사용해주었다고 생각하면 이해하기 편하다.

 

실행시켜보면

다음과 같이 출력된다.

위의 커다란 원의 경우

App.js 파일에서 props.huge를 통해

해당 원을 huge하게끔 출력하겠다고 설정해두었기에

원이 커다랗게 나온 것이다.

 

아래의 버튼의 경우는 앞서 말했듯

색깔을 일종의 변수로 지정하였기에

<StyledButton color="blue">BUTTON</StyledButton>

으로 지정해주면 파란색이,

<StyledButton color="pink">Button</StyledButton>

으로 지정해주면 분홍색이,

<StyledButton color="gray">Button</StyledButton>

으로 지정해주면 회색이 나오게 된다.