[Storybook] emotion으로 storybook 글로벌 스타일 설정하기 (reset css)

김효선·2021년 12월 13일
3
post-thumbnail

컴포넌트를 만들기 전, css를 reset하는 작업이 필요하다.
공통으로 사용되는 font-family도 이때 설정해주면 편하다.

GlobalStyle.tsx

src 폴더 하위에 GlobalStyle.tsx 를 작성했다.
(font는 Noto Sans KR 기준)

import { Global, css } from '@emotion/react';

const GlobalStyle = () => (
  <Global
    styles={css`
      @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
      html,
      body,
      div,
      span,
      applet,
      object,
      iframe,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      blockquote,
      pre,
      a,
      abbr,
      acronym,
      address,
      big,
      cite,
      code,
      del,
      dfn,
      em,
      img,
      ins,
      kbd,
      q,
      s,
      samp,
      small,
      strike,
      strong,
      sub,
      sup,
      tt,
      var,
      b,
      u,
      i,
      center,
      dl,
      dt,
      dd,
      ol,
      ul,
      li,
      fieldset,
      form,
      label,
      legend,
      table,
      caption,
      tbody,
      tfoot,
      thead,
      tr,
      th,
      td,
      article,
      aside,
      canvas,
      details,
      embed,
      figure,
      figcaption,
      footer,
      header,
      hgroup,
      menu,
      nav,
      output,
      ruby,
      section,
      summary,
      time,
      mark,
      audio,
      input,
      textarea,
      video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        box-sizing: border-box;
      }
      html {
        font-size: 62.5%;
        font-family: 'Noto Sans KR', 'sans-serif';
        body {
          font-size: 1.6rem;
        }
      }
      ol,
      ul {
        list-style: none;
      }
      a {
        background-color: transparent;
        text-decoration: none;
        outline: none;
        color: inherit;
        &:active,
        &:hover {
          text-decoration: none;
          color: inherit;
          outline: 0;
        }
      }
      button {
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        border: none;
        background: none;
        padding: 0;
        user-select: none;
        cursor: pointer;
        white-space: nowrap;
        letter-spacing: inherit;
        font: inherit;
        color: inherit;
      }
      input {
        outline: none;
      }
    `}
  />
);
export default GlobalStyle;

reset css는 구글에 서치하면 나오는 내용과 개인적으로 추가하고 싶은 부분들을 추가해서 작성했다.

preview.js

preview.js 에서 파일을 import 할 수가 있다.
스토리북에 보이는 컴포넌트들에 공통 스타일을 주고싶을 때 여기서 설정하면 된다.

import GlobalStyle from '../src/GlobalStyle';

export const decorators = [
  (Story) => (
    <>
      <GlobalStyle />
      <Story />
    </>
  ),
];

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Decorators에 대한 스토리북 문서 보기

하지만 이곳에서 주는 스타일은 스토리북에서 볼 때만 적용되는 스타일이지, 실제 라이브러리로 배포 후 프로젝트에서 컴포넌트를 사용할 때에는 적용되어 있지 않는 스타일인 점을 유의해야한다.


이렇게 만든 GlobalStyle.tsx 컴포넌트를 추후에 같이 라이브러리로 배포하면 사진 예시처럼
별도의 reset css 파일 필요 없이 편리하게 import해서 적용하기 좋다.

profile
차근차근 나아가는 주니어 프론트엔드 개발자

0개의 댓글