TIL-styled-components

1. 설치 방법

npm install styled-components

2. import

import styled from 'styled-components'

3. 컴포넌트화 시킴 (대문자)

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>
  )
}

4. 비슷한 스타일 적용 시 (props로 컴포넌트 재활용)

let YellowBtn = styled.button`
	background: ${props => props.bg};
    color:black;
    padding : 10px;
    `
function Detail(props) {
return (
	<YellowBtn bg="blue">버튼 </YellowBtn>
    <YellowBtn bg="orange">버튼 </YellowBtn>

5. 스타일에 조건문 지정

let YellowBtn = styled.button`
	background: ${props => props.bg};
    color:${props => props.bg == 'blue' ? 'white' : 'black};
    padding : 10px;
    `
function Detail(props) {
return (
	<YellowBtn bg="blue">버튼 </YellowBtn>
    <YellowBtn bg="orange">버튼 </YellowBtn>