CSS-in-JS

次にCSS-in-JSという手法で、コンポーネント内にCSSも一緒に書くものになります。

その中でもstyled-componentsというライブラリを用いるのが最も人気であり、扱いやすいため、styled-componentsを使った手法を説明します。

まずは、styles-componentsをインストールしましょう。

npm install styled-components

また、TypeScriptでの実装になるので、@types/styled-componentsもインストールします。

npm install @types/styled-components

では、BreadcrumbコンポーネントにCSSを当てていきましょう。まず、Breadcrumb.tsxにstyled-componentsのstyledをimportします。

Breadcrumb.tsx◎

import { useState } from "react";
import styles from "./Breadcrumb.module.css";
import styled from "styled-components";

...

使い方として、<p>itemがありません。</p>と<p>itemが{items.length}あります</p>にCSSを当てたいとします。その場合styled.p`当てたいCSS`のようにして、CSSを当てたpタグを作成することができます。記述する場所に関してですが、コンポーネントの外側に記述するようにしましょう。以下にてNoticeParagraphというCSSを当てたpタグを生成することができました。

Breadcrumb.tsx◎

...
type Props = {
  items: string[];
};

const NoticeParagraph = styled.p`
  font-weight: 100;
  color: gray;
`;
...

上記を利用するには、通常のタグのように記述します。

Breadcrumb.tsx◎

...
      {items.length === 0 ? (
        <NoticeParagraph>itemがありません。</NoticeParagraph>
      ) : (
        <NoticeParagraph>itemが{items.length}あります</NoticeParagraph>
      )}
...

ブラウザにて以下のように確認できるかと思います。

また、styled-componentにて作成したタグもpropsを受け取ることができ、styled.p<型>のようにジェネリクスに型を宣言することで受け取ることができます。

まずは受け取る型エイリアスを宣言しましょう。

Breadcrumb.tsx◎

...

type NoticeParagraphProps = {
  isBlank: boolean;
};

const NoticeParagraph = styled.p`
  font-weight: 100;
  color: gray;
`;
...

宣言した型をジェネリクスにて宣言し、呼び出し方は${(props) => 処理}のように記述します。

今回は、isBlankがtrueの場合はred、falseの場合はgrayの文字列を返却し、colorがisBlankによって変化するようにします。

Breadcrumb.tsx◎

...

type NoticeParagraphProps = {
  isBlank: boolean;
};

const NoticeParagraph = styled.p<NoticeParagraphProps>`
  font-weight: 100;
  color: ${(props) => (props.isBlank ? "red" : "gray")};
`;
...

そして呼び出す部分にて、propsを渡します。ちなみにboolean型のpropsの場合は、trueの場合そのprops名のみを記述するだけでtrueを渡すことができます。

Breadcrumb.tsx◎

...
      {items.length === 0 ? (
        <NoticeParagraph isBlank>itemがありません。</NoticeParagraph>
      ) : (
        <NoticeParagraph isBlank={false}>
          itemが{items.length}あります
        </NoticeParagraph>
      )}
...

App.tsxにて、空のitemsを渡しましょう。

App.tsx◎

...
      <Breadcrumb items={items2} />
      <Breadcrumb items={[]} />
      <UserDetail />
...

ブラウザにて以下のように確認できるかと思います。