StyledComponents에서 스펀지를 처리하는 방법

StyledComponents에서 회전 스펀지 지원

React와 Next에서 Styled Components를 사용하면 스펀지를 어떻게 대처할 것인가?이런 의문이 생겼다.
조사를 많이 해도 별다른 보도가 없으니 이번에 소개한 방법이 맞는지 모르겠다.
나는 사용하기에 매우 편리하다고 생각한다.

스펀지 대처법

이번 사용 버전 일람

버전에 따라 바뀔 가능성이 있기 때문에 미리 버전을 싣기도 한다.
이번에는 넥스트JS로 구성됐지만 리액트도 마찬가지로 사용할 수 있다.

"next": "12.1.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"styled-components": "^5.3.5"

Theme 작성

the 폴더를 만들고 전체 테마 값 등을 추가합니다.
파일 구성

theme
├── setting
│   ├── breakpoint.ts //ブレイクポイントの設定
│   ├── colors.ts //カラーの設定
│   ├── fonts.ts //フォントの設定
│   └── zindex.ts //zindexの設定
└── theme.ts //全部の設定を一つにまとめる為のファイル

다양한 파일 구성

TailwindCSS를 기반으로 돌파점을 설정했습니다.
이동식 패스트푸드는 640768202421280타스다.
breakpoint.ts

import {
  CSSObject,
  FlattenSimpleInterpolation,
  SimpleInterpolation,
  css,
} from 'styled-components';

export const breakpoint = {
  base: (
    base: CSSObject | TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
  ): FlattenSimpleInterpolation => css`
      ${css(base, ...interpolations)}
  `,
  sm: (
    sm: CSSObject | TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
  ): FlattenSimpleInterpolation => css`
    @media (min-width: 640px) {
      ${css(sm, ...interpolations)}
    }
  `,
  md: (
    md: CSSObject | TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
  ): FlattenSimpleInterpolation => css`
    @media (min-width: 768px) {
      ${css(md, ...interpolations)}
    }
  `,
  lg: (
    lg: CSSObject | TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
  ): FlattenSimpleInterpolation => css`
    @media (min-width: 1024px) {
      ${css(lg, ...interpolations)}
    }
  `,
  xl: (
    xl: CSSObject | TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
  ): FlattenSimpleInterpolation => css`
    @media (min-width: 1280px) {
      ${css(xl, ...interpolations)}
    }
  `,
};

이것은 컬러를 저장한 파일입니다.
안의 값이 비교적 적당하니 각자의 사이트 주제색을 가입하세요
colors.ts

export const colors = {
  // 汎用カラー
  black: '#000',
  white: '#fff',

  //テーマカラー
  primary: '#de1671',
  secondary: '#090105',
  subcolor: '#34051a',

  //その他
};

글꼴 패밀리, 크기, 문자 굵기의 수치를 저장합니다.
이 역시 TailwindCSS를 참조하여 구성한 것입니다.
fonts.ts

export const fonts = {
  family: {
    sans: '"Open Sans", sans-serif',
  },
  size: {
    xs: '0.75rem',
    sm: '0.875rem',
    base: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    xl2: '1.5rem',
    xl3: '1.875rem',
    xl4: '2.25rem',
    xl5: '3rem',
    xl6: '3.75rem',
    xl7: '4.5rem',
  },
  weight: {
    thin: 100,
    extralight: 200,
    regular: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
  },
};

나는 zidex의 값을 보관할 것이다.
사용하지 않는 사람은 필요하지 않을 수도 있지만 수치가 적당해지기 쉬우니 명확히 하고 싶은 사람은 만들어주세요.
zindex.ts

export const zindex = {
  modal: 100,
  drawer: 50,
  floating: 40,
  header: 30,
  footer: 20,
  front: 10,
  defalt: 1,
  background: -10,
}

모든 설정을 하나로 병합

방금 만든 프로필을 하나로 설정합니다.
만약 또 다른 필요한 설정이 있다면, 여기에 보충하기만 하면 설정할 수 있다.
theme.ts

import { fonts } from './setting/fonts';
import { zindex } from './setting/zindex';
import { colors } from './setting/colors';
import { breakpoint } from './setting/breakpoint';

export const theme = {
  breakpoint: breakpoint,
  colors: colors,
  zindex: zindex,
  fonts: fonts,
};

TheemeProvider 설정

만든 theme를 적용하기 위해서 설정 ThemeProvider 을 사용하십시오._app.tsx에서 를 설정하면 전역으로 설정할 수 있습니다.
_app.tsx

return (
  <ThemeProvider theme={theme}>
    <Component {...pageProps} />
  </ThemeProvider>
);

사용법

import styled from "styled-components"

export const Title = () => {
  return (
    <StyleTitle>
      Hello Next.js
    </StyleTitle>
  )
}

const StyleTitle = styled.h1`
  ${({ theme }) => theme.media.base`
    color: ${theme.colors.black};
    font-size: ${theme.fonts.size.xs};
  `}
  ${({ theme }) => theme.media.sm`
    color: ${theme.colors.white};
    font-size: ${theme.fonts.size.sm};
  `}
  ${({ theme }) => theme.media.md`
    color: ${theme.colors.primary};
    font-size: ${theme.fonts.size.base};
  `}
  ${({ theme }) => theme.media.lg`
    color: ${theme.colors.secondary};
    font-size: ${theme.fonts.size.lg};
  `}
  ${({ theme }) => theme.media.xl`
    color: ${theme.colors.subcolor};
    font-size: ${theme.fonts.size.xl};
  `}
`

장점과 단점

장점

일관성

스펀지 패드를 간단하게 할 수 있다

간단한 설정 가능

결점

VScode의 보완 기능을 사용할 수 없음

쓰기가 귀찮아요

참고 자료

https://zenn.dev/nbr41to/articles/843535fb6e4e4f
https://zenn.dev/hirokikameda/articles/675999fe06c3fe