설치

$ npm install styled-components
# or
$ yarn add styled-components

기본사용법( sass 문법 지원 )

import React from 'react';
import styled from 'styled-components';

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: black;
  border-radius: 50%;

    >a {
        color: #BFCBD9;
        text-decoration: none;
    }

    &:hover {
        opacity: 0.1;
    }
`;

export const AutoLayoutStyle = css`
    width: 100%;
    height: 100%;
`;

function App() {
  return <Circle />;
}

export default App;

Sass - lighten() 또는 darken() : polished

yarn add polished

import React from 'react';
import styled from 'styled-components';
import { darken, lighten } from 'polished';

const StyledButton = styled.button`
  background: darken($w9-color-primary, 20%); - scss

  /* 색상 */
  background: #228be6;
  &:hover {
    background: ${lighten(0.1, '#228be6')}; - polished
  }
  &:active {
    background: ${darken(0.1, '#228be6')}; - polished
  }

`;

function Button({ children, ...rest }) {
  return <StyledButton {...rest}>{children}</StyledButton>;
}

export default Button;

전역스타일을 적용할 경우 ThemeProvider

스타일링을 시작하기 앞서, 자주 사용하게 될 색상 코드, 사이즈, 폰트, 미디어 쿼리 등의 정보를 변수로 생성해 사용하면 일관적인 스타일 관리가 가능합니다

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import Button from './components/Button';

const AppBlock = styled.div`
  width: 512px;
  margin: 0 auto;
  margin-top: 4rem;
  border: 1px solid black;
  padding: 1rem;
`;

function App() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          blue: '#228be6',
          gray: '#495057',
          pink: '#f06595'
        }
      }}
    >
      <AppBlock>
        <Button color="gray">BUTTON</Button>
        <Button color="gray">BUTTON</Button>
        <Button color="pink">BUTTON</Button>
      </AppBlock>
    </ThemeProvider>
  );
}

export default App;

컴포넌트 상속

export const TileDiv = styled.div`
    display: flex;
    flex: 1;
    margin: 0 auto;
    max-width: 1550px;
`;

import { TileDiv } from './styles/CommonStyle';

const ContactDiv = styled(TileDiv)`
    flex-direction: column;
    padding: 5px;
    box-sizing: border-box;
`;

css 삽입

export const AutoLayoutStyle = css`
    width: 100%;
    height: 100%;
`;

export const DirectSizeStyle = ({width, height}) => css`
    width: ${width};
    min-width: ${width};
    height: ${height};
    min-height: ${height};
`;

import { AutoLayoutStyle } from './styles/CommonStyle';
const IntroduceDiv = styled.div`
    ${AutoLayoutStyle};
    ${DirectSizeStyle({width: '200px', height: '200px'})};
`;

const CompItemContentTitleDiv = styled.div`
    display: flex;
    color: #008073;
    font-size: 20px;
    font-weight: 600;
    
    ${css`
        >span {
            cursor: pointer;
            height: 12px;
            padding-bottom: 10px;
            &:hover {
                border-bottom : 2px solid #008073;
            }
        }
    `}
`;

데이터 삽입(특히, 이미지)