React styled-components

CSS대신에 아래처럼 JS파일 안에 css스타일링을 할 수 있고

심지어 props(약간 사용법 다름 유의)로 조건식등을 넣어서 스타일링도 가능함.

 

터미널에 아래 입력해서 설치해줌

 

npm install styled-components

근데 설치가 안될수 있음!

(최근 버전이 npm과 충돌이 있는듯 함. 이 경우 아래 처럼 입력

yarn add styled-components

 

 

아래처럼 사용. 이렇게 컴포넌트에 넣어서 사용도 가능함.

import styled from 'styled-components';

let YellowBtn = styled.button` 
  background : ${ props => props.bg };
  color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
  padding : 10px; 
`; 

function Detail(){
  return (
    <div>
        <YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>
        <YellowBtn bg="blue">파란색 버튼임</YellowBtn>
    </div>
  )
}

그러나 JS파일이 복잡해지는 단점이 있긴함.