styled components

Styled-Component 는 스타일을 가진 컴포넌트를 만들 수 있도록 도와주는 CSS-in-JS 라이브러리 입니다.

styled components 장단점

장점

• className 중복되서 생기는 문제를 해결함

• scss 설치 없이 scss 문법을 사용 가능

• 자바스크립트로 처리하기 때문에 처리 하는 css 역할로 매우 우수

단점

• css 수정할때마다 해당하는 컴포넌트 파일 위치 일일히 찾아야되는 번거로

• css를 줄 태그를 모두 컴퍼넌트를 만들어야한다는점에서 가독성이 떨어

레이아웃은 scss로 만들고, 공통은 styled-components로 작업 규칙을 정해서 정의해서 사

설치

npm install --save styled-components

사용법

• const 컴포넌트명 = styled.태그명`css 정의`

• 기존 전역 모듈 injectGlobal 없어짐 ( reset.css - createGlobalStyle 로 임폴트 사용 )

• 상속 받은 컴포넌트 스타일 추가할때는 styled(컴포넌트.withComponent("태그명"))`css 정의`

• 상속 받을때는 컴포넌트.withComponent("태그명")

import React, { Component, Fragment } from 'react';
import styled from 'styled-components'; //styled-components 불러오
import styled, { createGlobalStyle } from "styled-components"; // reset css 사

const GlobalStyle = createGlobalStyle`
      body {
        margin: 50px;
        padding: 50px;
        background-color: black;
      }
    `;
                        
class App extends Component {
  render() {
    return (
      <Fragment>
        <GlobalStyle></GlobalStyle> // reset css 추가
    		<Button>Hello</Button>
    		<Button danger>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;
    }
`;

export default App;