[React] Styled-Components

It provides what for React

• can use sass in react (sass 사용가능)
• can extends style properties (style 속성 확장 가능)
• don't need className and css files anymore (className 사용 할 필요 없음, css파일 따로 필요없음)

It provides what for React-Native

• you can use pure css properties when write styles(리액트 네이티브 스타일 문법 안써도 됨)

install

npm intall --save styled-components

how to use

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

class App extends Component {
  render() {
    return (
      <Fragment>
        <Button>Hello</Button>
        <Button red>Hello</Button>
      </Fragment>
    )
  }
}

const Button = styled.button`
    border-radius: 50px;
    padding: 5px;
    min-width: 120px;
    color: white;
    font-weight: 600;
    -webkit-appearance: none;
    cursor: pointer;
    &:active,
    &:focus {
      outline: none;
    }
    background-color: ${props => (props.red ? 'red' : 'purple')}
`;

export default App;