Styled-Components Polished 라이브러리

✨ polished | A lightweight toolset for writing styles in JavaScript

Polished 라이브러리는 다양한 스타일 유틸 함수를 적용할 수 있습니다

사용할 함수를 가져와서 import하면 적용됩니다

Polished 라이브러리 설치

$ npm install --save polished

Button.js에 사용할 import 해줍니다

import { darken, lighten } from 'polished';

hover에서 사용해봅시다

  /* 색상 */
  background: #228be6;
  &:hover {
    background: ${lighten(0.1, "#228be6")};
  }
  &:active {
    background: ${darken(0.1, "#228be6")};
  }

사이트에서 확인하면 값이 잘 적용된걸 확인할 수 있습니다

이제 추가 버튼을 만들어보겠습니다

색상 코드를 기존 그대로 Button.js에서 만드는 대신에 App.js에서 선언해서 그 색상값이 어떤 스타일 컴포넌트던지 쉽게 조회해서

사용할 수 있는 방법을 알아보겠습니다

App.js에서 ThemeProvider를 불러옵니다

import styled, { ThemeProvider } from "styled-components";

그리고 App.js를 감싸줍니다

function App() {
  return (
    <ThemeProvider>
      <AppBlock>
        <Button>BUTTON</Button>
      </AppBlock>
    </ThemeProvider>
  );
}

컬러값 변수를 생성합니다

//https://yeun.github.io/open-color/
const palette = {
  blue: "#228be6",
  pink: "#f783ac",
  violet: "#9775fa",
};

theme라는 객체를 설정합니다

<ThemeProvider theme={{ palette }}>
      <AppBlock>
        <Button>BUTTON</Button>
      </AppBlock>
    </ThemeProvider>

Button.js에서 theme안에 들어있는 색상들을 읽어보겠습니다

이런식으로 설정합니다

/* 색상 */
  background: ${(props) => props.theme.palette.blue};

hover도 변경해보겠습니다

/* 색상 */
  background: ${(props) => props.theme.palette.blue};
  &:hover {
    background: ${(props) => lighten(0.1, props.theme.palette.blue)};
  }
  &:active {
    background: ${(props) => darken(0.1, props.theme.palette.blue)};
  }

이제 이 색상 코드를 길게 쓰는것보다 함수로 하나로 묶어서 사용할 수도 있습니다

css를 불러옵니다

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

아래처럼 지정합니다

 /* 색상 */
  ${(props) => {
    const color = props.theme.palette.blue;
    return css`
      background: ${color};
      &:hover {
        background: ${lighten(0.1, color)};
      }
      &:active {
        background: ${darken(0.1, color)};
      }
    `;
  }}

props로 가져오는 함수를 딱 한번 작성하고 간편하게 불러올 수 있습니다

이제 추가 버튼을 만들어보겠습니다

먼저 Button에 추가 props를 생성합니다

function Button({ children, color,  ...rest })

기본값 설정을 합니다

//Button 기본값 설정
Button.defaultProps = {
  color: "blue",
};

color 값을 그대로 StyledButton에 넣어줍니다

<StyledButton color={color} {...rest}>

이제 색상에 blue대신에 props.color를 넣어줍니다

/* 색상 */
  ${(props) => {
    const color = props.theme.palette[props.color];

이제 App.js에서 버튼 2개를 더 만들고 컬러값을 넣어줍니다

<AppBlock>
        <Button>BUTTON</Button>
        <Button color="pink">BUTTON</Button>
        <Button color="violet">BUTTON</Button>
      </AppBlock>

리액토링을 해보겠습니다

Button.js 색상에서 color 대신에 selected로 값을 바꿔줍니다

/* 색상 */
  ${(props) => {
    const selected = props.theme.palette[props.color];
    return css`
      background: ${color};
      &:hover {
        background: ${lighten(0.1, selected)};
      }
      &:active {
        background: ${darken(0.1, selected)};
      }
    `;
  }}

props로 가져오게 될 때 theme, color를 따로 비구조화할당을 시켜줍니다

/* 색상 */
  ${(theme, color) => {

props라고 명시되어 있는 것도 지워줍니다

${(theme, color) => {
    const selected = theme.palette[color];

그리고 색상코드 전체를 styled 밖으로 뺄 수 있습니다

const colorStyles = css`
  /* 색상 */
  ${({ theme, color }) => {
    const selected = theme.palette[color];
    return css`
      background: ${color};
      &:hover {
        background: ${lighten(0.1, selected)};
      }
      &:active {
        background: ${darken(0.1, selected)};
      }
    `;
  }}
`;

/* 색상 */
  ${colorStyles}