React - styled-components

React에서 각 컴포넌트를 구성할 때 사용하는 라이브러리와 전체적으로 적용을 할 때 사용하는 라이브러리가 있다.

styled-components은 각 컴포넌트를 구성할 때 많이 사용하고,
import { createGlobalStyle} from 'styled-components' 는 홈페이지에서 전체 적용을 할 때 사용을 한다.

1. styled-components

styled-components는 CSS in JS 관련 리액트 라이브러리 중 인기있는 라이브러리이다. 이 와 비슷한 것으로는 emotion, styled-jsx가 있지만 styled-components 가장 인기가 많아 많이 사용되고 있다.

import React from 'react';
import styled, { css } from 'styled-components';

CSS 스타일 속성을 쓰기 위한다는 의미이다.

const Circle = styled.div`
 width: 10rem;
 height: 10rem;
 background: ${props => props.color || 'black'};
 border-radius: 50%;
 ${props => props.huge && 
  css`
    width: 10rem;
    height: 10rem;
  `}
`;

우선 Circle이라는 변수를 만들어서 로 CSS를 적용시켰다. Circle에는 가로와 세로 크기 모두 10rem으로 지정 해주었고 background 색상은 props 지정색깔이거나 블랙으로 설정을 했다.
props.huge의 CSS 속성을 따로 적용시켰는데 이것은 조건부로 사용할 때 이런식으로 사용한다.

2. polished

plosihed는 색상을 lighten, darken 할 때 사용하는 라이브러리이다.

background: ${lighten(0.1, '#228be6')};
    &:hover {
        background: #339af0;
    }
    &:active {
        background: ${darken(0.1, '#1c7ed6')};
    }

이렇게 마우스로 hover시에는 lighten속성을 가지게 한다.
active을 할때는 어둡게 darken이라는 속성을 가지게 한다.