styled-components

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생긴다.

css파일이 너무 길어져 수정이 어려워진다거나 원하지않는 컴포넌트에 스타일이 적용되는 경우 등이 대표적인 예시일 것이다.

그 경우를 외부 라이브러리로 해결해 보자.

일단, npm install styled-components를 설치해준다.

import styled from 'styled-components'

역시 import는 필수다.

import styled from 'styled-components';

let Box = styled.div`
  padding : 20px;
  color : grey
`;
let YellowBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
      <Box>
        <YellowBtn>버튼임</YellowBtn>
      </Box>
    </div>
  )
}

기본적인 사용방법이다.
div태그를 스타일링 하고 싶다면 styled.div``를 사용하면 된다.
button도 위에처럼 사용하면 된다.

import styled from 'styled-components';

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

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

위의 코드처럼 props를 사용해서 내용값을 유동적으로 사용할 수도 있다.

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