TIL[89].style components

브랜디 협업 진행을 하며 프론트페이지도 작업을하게 되었다.
UI 작업을 진행하며 css 작업을 쉽게 도와주는 모듈로서 style-components 라는 것을 알게되었다.
Django와 Flask로 백엔드를 하고 있지만, 나중에 프론트를 하게 될 경우에라도 꼭 알고 있어야 하는 좋은 모듈인 것 같아 기록에 남겨둔다.

styled components 설치하기

npm install --save styled-components

styled componenets import 및 사용 예시

1. styled components 모듈을 Import 한다.
2. css style을 줄 영역을 만들어준다.
   예시)

 const PageTitle = styled.div

3. 위 코드 안에 css style을 작성 및 선언한다.
   예시)

const PageTitle = styled.div`
  padding: 0px;
  font-size: 23px;
  letter-spacing: -1px;
  display: block;
  color: #666;
  margin: 0px 0px 15px 0px;
  font-weight: 300;
  font-family: "Open Sans", sans-serif;
  small {
    font-size: 13px;
    padding-top: 3px;
  }
`;

4. 전체 예시

import React, { Fragment } from "react";
import styled from "styled-components";
import { AiOutlineHome } from "react-icons/ai";
import { AiOutlineRight } from "react-icons/ai";

function Title() {
  return (
    <Fragment>
      <Container>
        <PageTitle>
          셀러 정보 수정페이지 <small>셀러 정보 조회 / 수정 </small>
        </PageTitle>
        <SubTitle>
          <AiOutlineHome />
          <div>회원 관리 </div>
          <AiOutlineRight />
          <div>셀러 계정 관리 </div>
          <AiOutlineRight />
          <div>셀러 정보 조회 / 수정</div>
        </SubTitle>
      </Container>
      {/* // )} */}
    </Fragment>
  );
}

export default Title;

const PageTitle = styled.div`
  padding: 0px;
  font-size: 23px;
  letter-spacing: -1px;
  display: block;
  color: #666;
  margin: 0px 0px 15px 0px;
  font-weight: 300;
  font-family: "Open Sans", sans-serif;
  small {
    font-size: 13px;
    padding-top: 3px;
  }
`;

const SubTitle = styled.div`
  display: flex;
  background-color: #eee;
  margin-bottom: 25px;
  margin-left: -20px;
  margin-right: -20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 20px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  color: black;
  font-size: 13px;
  text-shadow: none;
  svg {
    margin-right: 5px;
  }
}
`;