• 현대 웹 앱이 컴포넌트를 기반으로 성숙해가면서 CSS 스타일링 방법론 또한 컴포넌트를 기반으로 재구성되고 있으며 CSS-in-JS가 등장하였고, 그 중 가장 인기 있는 라이브러리가 바로 우리가 다뤄볼 Styled-Components이다.

1. Styled-Component

• 설치

npm install --save styled-components

• 사용

import styled from "styled-component"

const title = styled.div`
  background-color: red;
  margin: 10px 0;
`

1-1. Adapting based on props (가장 기본적이고 많이 쓰이는 항목)

• ex1)

import styled from 'styled-components';

<title check={true} />

const title = styled.div`
  background-color: red;
  margin: 10px 0;
  ${props=>{
  	return props.check ? 'background-color: white' : 'background-color:black'
  }}
`

• ex2)

render(
  <div>
    <Button>Normal</Button>
    <Button primary width="100">Primary</Button>
  </div>
);

// 만약 Button 컴포넌트에 전달된 props(width)가 200 미만(조건)이면
// 삼항연산자 true : "palevioletred"
// 삼항연산자 false : "white"

const Button = styled.button`
  background: ${props => props.width < 200 ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

1-2. Extending Styles

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoAnchorButton>Tomato Button</TomatoAnchorButton>
  </div>
);

// The Button from the last section without the interpolations
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// A new component based on Button, but with some override styles
// Button의 속성을 상속 받아 새로운 anchor 태그를 생성
const TomatoAnchorButton = styled(Button.withComponent("a"))`
  color: tomato;
  border-color: tomato;
`;

1-3. Nesting & Global Style (의미없는 styled-component 지양하기)

render(
  <>
    <GlobalStyle />
    <Thing>
      I'm blue, da ba dee da ba daa
    </Thing>
  </>
)

const Thing = styled.div`
  && {
    color: blue;
  }
`

const GlobalStyle = createGlobalStyle`
  ${Thing} {
    color: red;
  }
`

1-4. mixin

import { css } from "styled-components"

const Navigation = styled.nav`
  position: fixed;
  ${Sticky}
`;

const Sticky = css`
  position: fixed !important;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.11);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.11);
  transition: all 0.6s ease-in-out;
  color: black;
`;