[Vue.js] styled components 사용법

색상 테마를 만들 수 있는 vue-styled-components 사용법에 대해 알아보겠습니다.

(vue 2 버전, vue-styled-components 1.6.0 버전 사용)

 

---

 

1. vue-styled-components 공식 문서

GitHub : https://github.com/styled-components/vue-styled-components

 

 

2. javascript 파일

- styled 폴더를 따로 만들어서 vue syled components를 구현할 파일을 만들었습니다.

import styled, { css } from "vue-styled-components";

export const BoxBackground = styled("div")`
  ${props =>
    props.theme === "THEME-RED" &&
    css`
      background-color: red;
    `}

  ${props =>
    props.theme === "THEME-PINK" &&
    css`
      background-color: pink;
    `}
`;

export const SmallBtn = styled("li")`
  ${props =>
    props.theme === "THEME-RED" &&
    css`
      color: white;
      background-color: none;

      &:first-child {
        color: black;
        background-color: red;

        &:hover {
          background-color: rgb(255, 175, 175);
        }
      }

      &:hover,
      &:active {
        background-color: rgb(255, 175, 175);
      }
    `}

  ${props =>
    props.theme === "THEME-PINK" &&
    css`
      color: white;
      background-color: none;

      &:first-child {
        color: white;
        background-color: pink;

        &:hover {
          background-color: rgb(252, 167, 255);
        }
      }

      &:hover,
      &:active {
        background-color: rgb(252, 167, 255);
      }
    `}
`;

- props로 theme 정보를 받아 각 테마 별로 다른 style을 적용했습니다.

- 각 컴포넌트가 어떤 태그 역할을 할 것인지 "div", "li" 등으로 명시합니다.

- 위 코드는 THEME-RED와 THEME-PINK로 나누어 각 테마에 맞게 스타일을 적용했습니다.

 

- 저는 scss를 사용하고 있어서 &를 이용하여 first-child, hover, active 등의 색상도 구현했습니다.

 

 

3. vue 파일

- .vue 파일 내부 javascript 코드

<script>
import { BoxBackground, SmallBtn } from "styled/sample";

export default {
  components: { BoxBackground, SmallBtn }
};
</script>

 

 

- .vue 파일 내부 HTML 코드

<template>
  <div id="main-component">
    <BoxBackground>
      <div> ... </div>
      
      <ul>
        <SmallBtn>버튼1</SmallBtn>
        <SmallBtn>버튼2</SmallBtn>
        <SmallBtn>버튼3</SmallBtn>
      </ul>
    </BoxBackground>
  <div>
</template>

- BoxBackground는 div와 같고, 위에서 정의한 대로 스타일이 적용됩니다.

- SmallBtn은 li와 같고, BoxBackground와 같은 원리로 스타일이 적용됩니다.

 

- 이처럼 여러 테마를 적용하여 다른 색상의 테마를 구현할 수 있습니다.

 

 

 

이상으로 vue-styled-components 사용법에 대해 알아보았습니다.

---