• Styled Components 란?

  • 설치
    $ npm install --save styled-components

  • 사용법 (methods)

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

class App extends Component {
  render() {
    return (
      <Fragment>
        <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;
    }
    background-color: ${props => (props.danger ? 'red' : 'purple')}
`;

export default App;

styled 객체 안에 'styled-components'를 import 해주고, Button 변수에 styled.button 방식으로 html button 태그를 css와 함께 담아준다.
마지막에 background-color를 보면 props에 체크해서 red 혹은 purple로 지정할 수도 있다.

예를 들어 body태그의 margin, padding을 없애고 싶을때는 styled-componentscreateGlobalStyle메소드를 사용하면 된다.


---생략---

import styled, { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
    body {
        padding: 0;
        margin: 0;
    }
`;

---생략---

<React.Fragment>
  <GlobalStyle>    //    <-- 추가
  <Button>Hello</Button>
  <Button danger>Hello</Button>
</React.Fragment>

createGlobalStyle메소드를 import 하고, GlobalStyle 변수 안에 body의 style을 정의해주고 랜더링 부분에 추가해주면 된다.


withComponent 메소드는 새로운 stylecomponent를 생성하고 다른 태그에 적용 시킨다.

예를들어 button 태그의 stylecomponent를 a 태그에 적용시키고 싶다면 아래와 같이 한다.


const Anchor = Button.withComponent('a');

css를 추가하고 싶다면 styled 메소드를 이용.


const Anchor = styled(Button.withComponent('a'))`
    text-decoration: none;
`;


keyframes => animation을 위한 keyframes을 생성하는 메소드.
v4에서는 keyframes 을 쓰기 위해 css 헬퍼를 함께 써야한다.

keyframes 참고 시작 ==>

  1. @keyframes란?

    • @keyframes 는 css 문법중 하나로 애니메이션이 만들어지는 부분.
    • @keyframes 를 타임라인 안의 하나의 스테이지(구간).
    • @keyframes 안에서 우리는 스테이지들을 정의하고 각 구간마다 다른 스타일을 적용 시킬 수 있다.
  2. @keyframes 사용법?

    • 애니메이션 스테이지들을 정의. @keyframes 속성들은~

      • 우리가 정한 이름 ex) tutsFade

      • 스테이지: 0~100%; from(0%) 그리고 to(100%)

      • CSS 스타일: 각 구간에 적용시킬 스타일

          @keyframes tutsFade {
            from {
              opacity: 1;
            }
            to {
              opacity: 0;
            }
          }
        
          .element {
              animation: tutsFade 4s 1s infinite linear alternate;
          }
        

keyframes 참고 끝==>


import styled, { createGlobalStyle, css, keyframes } from 'styled-components';

---생략---

const Button = styled.button`
    ${props => {
        if (props.danger) {
            return css `animation: ${rotation} 2s linear infinite `;
        }
    }}
`;

const rotation = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
`


props 로 style 을 변경할 수 있다.


<Button danger rotationTime={5}></Button>

const Button = styled.button`

    ---생략---

    ${props => {
        if (props.danger) {
            return css `animation: ${rotation} ${props.rotationTime}s linear infinite `;
        }
    }}
`;

Button 컴포넌트에 rotationTimeprops 로 css 를 변경했다.