Typerscript에서 styled-components를 사용할 때의 Tips

개시하다

이번Typescript + React에서styled-components사용시Tips를소개합니다.style 속성에 직접 기재하는 것보다 양식을 관리하기 쉽고 사용하기 편리하다.
※ 평소React Native를 사용하지만 styled-components에 착안했을 때의 사용감은 거의 같기 때문에 샘플 코드는 React입니다.

원래 스타일드-components는

styled-components는 소위 CSS in JS고의 일종이다.
이름이 표시한 바와 같이 JS 또는 TS의 코드에 CSS 기재되어 있다.
https://styled-components.com
기본React 항목에서 구성 요소 자체는 JS와 TS에 기록되고 스타일은 CSS 파일의 통일입니다.
가장 큰 장점은 그것을 하나의 문서로 정리할 수 있다는 것이다.
양식은 템플릿 소양 기록을 바탕으로 만들어진 구성 요소의 양식을 계승하거나 확장할 수 있습니다.
많은 분들이 위에 내용만 보면 이해가 안 된다고 생각하니까 실제로 사용해 보세요.

실제로 사용해볼게요.

다음은 실제 활동 견본을 제작한 예이다.React + Typescript의 프로젝트가 생성되었습니다.

설치하다.

yarn add styled-components
yarn add --dev @types/styled-components

기본적인 서법

다음은 탭의 색을 붉게 하고 텍스트를 굵게 할 때 단추 구성 요소의 예입니다.

import React from "react";
import styled from "styled-components";

// 基本的なstyled-componentsの使い方
const CustomButton = styled.button`
  color: red;
  font-weight: bold;
`;

이 styled-components의 사용 방법은 일반적인 CustomButton 구성 요소와 같다.

<CustomButton>ほげほげ</CustomButton>

이것은 button 구성 요소에서 지정한 button와 같다.

<button style={{color: "red", fontWeight: "bold"}}>ほげほげ</button>

보시다시피 저는 CSS에 더 가까운 기법이라고 생각합니다.
이 스타일을 지정하는 곳을 '템플릿 상수' 라고 합니다.
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals
한편, 상기style의 예처럼 양식을 지정한 기술 방법을'대상 소양'이라고 한다.<button>를 사용하면 기본 구성 요소styled-components의 상황을 줄일 수 있습니다.

독립적으로 정의된 구성 요소도 지원합니다

그럼 직접 제작한 부품과 라이브러리render에서 나온 부품도 import 응용 스타일을 원하는 상황은 어떻습니까?styled-components도 그런 구성 요소를 지원한다.
다음은 예입니다.styled-componentsHoge는 간단한 구성 요소입니다.

import React from 'react';
const Hoge: React.VFC = (props) => <p {...props}>Original Component</p>;

이<p>에 대해 Hoge로 스타일을 지정하고 싶을 때 다음과 같다.

import React from "react";
import styled from "styled-components";
const Hoge: React.VFC = (props) => <p {...props}>Original Component</p>;

// Hogeに対してスタイルを適用する
const CustomHoge = styled(Hoge)`
  color: purple;
`

외부 프로그램 라이브러리styled-components에서 나온 구성 요소도 마찬가지로 처리할 수 있다.

속성에 따라 스타일 정의하기

import 구성 요소 중 흔히 볼 수 있는 것은'양식만 바꾸고 싶다button'는 것이다.disabled에서도 구성 요소에 전달되는 속성 값에 따라 스타일을 제어할 수 있습니다.
이 경우 다음과 같습니다.

import React from "react";
import styled from "styled-components";

// props.disabledでcolorを変化させる
const CustomButton = styled.button`
  color: ${(props: React.ButtonHTMLAttributes<HTMLButtonElement>) => props.disabled? 'red': 'blue' };
  font-weight: bold;
`;

이렇게 되면 styled-componentsbutton인 상태에서만 문자 색깔이 빨갛게 변하고 다른 때는 파랗게 변한다.
여기에 사용된disabled과props의button의 유형은 같다.
따라서 props형props형이다.

사용자 정의 속성

상술한 React.ButtonHTMLAttributes<HTMLButtonElement>의button와 같은 속성이 아니라 독자적으로 정의된 속성을 사용하고 싶은 경우가 있다고 생각합니다.
이런 상황에서 금형을 전달하여 대응할 수 있다.
기재는 아래와 같다.

import React from "react";
import styled from "styled-components";

// 独自定義のプロパティ
type CustomProps = {
  hoge?: boolean;
};

const CustomButton = styled.button<CustomProps>`
  color: ${(props) => props?.hoge? 'red': 'blue'};
`

이렇게 하면 disabled 전달CustomButton 속성을 통해 문자 색을 제어할 수 있다.
이런 상황에서 나는 맞춤형 속성은 대개 필수적인 것이 아니라고 생각한다.
이 경우 구성 요소의 hoge를 지정하여 초기 값을 확인하십시오.

import React from "react";
import styled from "styled-components";

// 独自定義のプロパティ
type CustomProps = {
  hoge?: boolean;
};

const CustomButton = styled.button<CustomProps>`
  color: ${(props) => props?.hoge? 'red': 'blue'};
`

// hogeの初期値をfalseにしておく
CustomButton.defaultProps = {
  hoge: false;
}

총결산

상기 내용을 총괄한 샘플 코드는 다음과 같다.

import React, { useCallback, useMemo, useState } from "react";
import styled from "styled-components";

// 基本的なstyled-componentsの使い方
const CustomButton = styled.button`
  color: red;
  font-weight: bold;
`;

// Propsの値によってスタイルを制御する例
// ここでは<p>のプロパティの1つであるchildrenを使っている
const CustomParagraph1 = styled.p`
  color: ${(props) =>
    props.children === "someFlg is True" ? "green" : "blue"};
`;

// 独自定義のプロパティ
type CustomProps = {
  hoge?: boolean;
};

// 継承 + 拡張したプロパティを使う例
const CustomParagraph2 = styled(CustomParagraph1)<CustomProps>`
  color: ${(props) => (props.hoge ? "pink" : "red")};
`;

// プロパティの初期値を設定することもできる
CustomParagraph2.defaultProps = {
  hoge: false
};

const App: React.FC = () => {
  const [someFlg, setSomeFlg] = useState(false);
  const reverseFlg = useCallback(() => {
    setSomeFlg((flg) => !flg);
  }, []);

  const label = useMemo(() => {
    return someFlg ? "someFlg is True" : "someFlg is False";
  }, [someFlg]);
  return (
    <div className="App">
      <CustomButton onClick={reverseFlg}>フラグ書き換え</CustomButton>
      <CustomParagraph1>{label}</CustomParagraph1>
      <CustomParagraph2 hoge={someFlg}>CustomType Sample</CustomParagraph2>
    </div>
  );
};

export default App;

화면에 있는 버튼을 누르면 defaultProps의 값이 변하는 것을 알 수 있고 state는 동적으로 스타일을 반영한다.

총결산

이번에는 styled-components의 환경에서 처리React + Typescript된 Tips의 내용을 총결하였다.
대상 소양의 기법에 익숙해지면 처음에는 파악하기 어려운 인상을 주지만, 앱의 규모가 커지면서 스타일 관리가 쉬워진다.
이번 내용을 참고할 수 있었으면 좋겠어요.