# CSS-in-JS 次に**CSS-in-JS**という手法で、コンポーネント内にCSSも一緒に書くものになります。 その中でも`styled-components`というライブラリを用いるのが最も人気であり、扱いやすいため、`styled-components`を使った手法を説明します。 まずは、`styles-components`をインストールしましょう。 ```bash npm install styled-components ``` また、TypeScriptでの実装になるので、`@types/styled-components`もインストールします。 ```bash npm install @types/styled-components ``` では、BreadcrumbコンポーネントにCSSを当てていきましょう。まず、`Breadcrumb.tsx`に`styled-components`の`styled`をimportします。 
import { useState } from "react";
import styles from "./Breadcrumb.module.css";
import styled from "styled-components";

...
使い方として、`

itemがありません。

`と`

itemが{items.length}あります

`にCSSを当てたいとします。その場合`` styled.p`当てたいCSS` ``のようにして、CSSを当てたpタグを作成することができます。記述する場所に関してですが、コンポーネントの外側に記述するようにしましょう。以下にて`NoticeParagraph`というCSSを当てたpタグを生成することができました。 
...
type Props = {
  items: string[];
};

const NoticeParagraph = styled.p`
  font-weight: 100;
  color: gray;
`;
...
上記を利用するには、通常のタグのように記述します。 
...
      {items.length === 0 ? (
        <NoticeParagraph>itemがありません。</NoticeParagraph>
      ) : (
        <NoticeParagraph>itemが{items.length}あります</NoticeParagraph>
      )}
...
ブラウザにて以下のように確認できるかと思います。
また、`styled-component`にて作成したタグもpropsを受け取ることができ、`styled.p<型>`のようにジェネリクスに型を宣言することで受け取ることができます。 まずは受け取る型エイリアスを宣言しましょう。 
...

type NoticeParagraphProps = {
  isBlank: boolean;
};

const NoticeParagraph = styled.p`
  font-weight: 100;
  color: gray;
`;
...
宣言した型をジェネリクスにて宣言し、呼び出し方は`${(props) => 処理}`のように記述します。 今回は、`isBlank`が`true`の場合は`red`、`false`の場合は`gray`の文字列を返却し、`color`が`isBlank`によって変化するようにします。 
...

type NoticeParagraphProps = {
  isBlank: boolean;
};

const NoticeParagraph = styled.p<NoticeParagraphProps>`
  font-weight: 100;
  color: ${(props) => (props.isBlank ? "red" : "gray")};
`;
...
そして呼び出す部分にて、propsを渡します。ちなみにboolean型のpropsの場合は、`true`の場合そのprops名のみを記述するだけで`true`を渡すことができます。 
...
      {items.length === 0 ? (
        <NoticeParagraph isBlank>itemがありません。</NoticeParagraph>
      ) : (
        <NoticeParagraph isBlank={false}>
          itemが{items.length}あります
        </NoticeParagraph>
      )}
...
`App.tsx`にて、空のitemsを渡しましょう。 
...
      <Breadcrumb items={items2} />
      <Breadcrumb items={[]} />
      <UserDetail />
...
ブラウザにて以下のように確認できるかと思います。