TIL 33 | Styled-Component

song hyun·2021년 9월 16일

CS

목록 보기

5/8

Styled Component

Styled Components는 CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 즉, 하나의 컴포넌트에 대한 HTML, CSS, JavaScript 파일을 분리해서 관리하는 게 아니고, 하나의 컴포넌트에 안에 HTML, CSS, JavaScript를 모두 포함 시키는 것이다.

Getting Started

styled-compoents를 사용하기 위해서는 먼저 import를 해온 styled객체를 이용한다.
그런 다음에 HTML 태그 뒤에 벡틱(`) 기호로를 사용하여 적용하고자 하는 스타일들을 정의하면된다.

import React, { useState } from 'react';
import styled from 'styled-components';
import Calendar from './components/Calendar/Calendar';
import Movie from './components/Movie/Movie';

function Booking() {
  const [active, setActive] = useState(false);

  const handleCalendar = () => {
    console.log('click');
    setActive(!active);
  };

  return (
    <>
      <Wrapper primary bg>
        <TopCategory>
          <TopItems>
            <Icon className="fas fa-home" primary></Icon>
          </TopItems>
          <TopItems>
            <Icon className="fas fa-chevron-right" />
            <span>예매</span>
          </TopItems>
          <TopItems>
            <Icon className="fas fa-chevron-right" />
            <span>빠른예매</span>
          </TopItems>
        </TopCategory>
      </Wrapper>
      <Wrapper primary>
        <Title primary>빠른예매</Title>
        <Calendar onClick={handleCalendar} active={active} />
        <Movie />
      </Wrapper>
    </>
  );
}

const Wrapper = styled.div`
  padding: ${({ primary }) => (primary ? '0  20%' : '0  0 ')};
  background: ${({ bg }) => bg && '#f8f8fa'};
`;

const TopCategory = styled.ul`
  display: flex;
  padding: 5px 0;
  font-size: 15px;
  color: #aaa;
`;

const TopItems = styled.li`
  margin-right: 9px;
  :first-of-type {
    margin-right: 3px;
    padding-top: 4px;
  }
  &:hover {
    text-decoration: underline;
  }
`;

const Icon = styled.i`
  margin-right: 5px;
  font-size: ${({ primary }) => (primary ? '13px' : '10px')};
`;

const Title = styled.h1`
  padding: ${({ primary }) => (primary ? '1% 0' : '0')};
  font-size: 18px;
`;

export default Booking;

Extending Styles

컴포넌트를 재활용하면서 추가 HTML 요소를 부여하고 싶을 때 기존 컴포넌트를 확장해서 새로운 태글 만든다. 예를 들면 버튼은 앵커 요소로 링크로 사용하고 싶을때 추가로 확장된 태그에 스타일링 가능하다.

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


function Booking() {
  return (
    <>
      <Btn>Button</Btn>
      <Anc>Link</Anc>
    </>
  );
}
const Btn = styled.button`
  background: lightcyan;
  margin-left: 10px;
`;

const Anc = styled(Btn.withComponent("a"))`
  color: blue;
`;

export default Booking;