【Reactでセレクトボックスを使う】React SelectのCSSカスタマイズ方法

プログラミング

React/Next.jsでセレクトボックスを使用する際、React Selectを使用することで簡単にUIを良い感じに作成することができます。ただ、アプリケーションのトンマナに合わせるにはスタイルのカスタマイズが必要でして、その方法をメモしておこうと思います。

実現したいこと

  • Reactでセレクトボックスを良い感じに使いたい

単純なセレクトボックスであればselectタグで実装すれば良いわけですが、UIをカスタマイズしたり機能を補完することもしたい。

方法

1.React Selectのパッケージを追加

npmやyarnでパッケージをインストールします。

yarn add react-select
or
npm i --save react-select

2.セレクトボックスを作成

Selectコンポーネントを用いてセレクトボックスを設置します。

import React, { Component } from "react";
import Select from "react-select";

export const Selectbox = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
  ];
  return <Select options={options} />;
};

3.セレクトボックスをカスタマイズ

customStyles変数にオプション情報を記述してSelectコンポーネントにpropsを渡します。カスタマイズの柔軟性はかなり高そうですね。

import React, { Component } from "react";
import Select from "react-select";

export const Selectbox = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
  ];
  const customStyles = {
    option: (provided, state) => ({
      ...provided,
      //ここでボックスの中身のスタイルをカスタマイズ
      borderBottom: "1px dotted pink",
      color: state.isSelected ? "red" : "blue",
      padding: 20,
    }),
    control: () => ({
      // none of react-select's styles are passed to <Control />
　　　 //ここでボックス自体のスタイルをカスタマイズ
      width: 200,
      display: "flex",
    }),
    singleValue: (provided, state) => {
      const opacity = state.isDisabled ? 0.5 : 1;
      const transition = "opacity 300ms";

      return { ...provided, opacity, transition };
    },
  };
  return <Select options={options} styles={customStyles} />;
};

4.その他

その他、複数選択や非同期処理、項目の追加を可能とする等のカスタマイズが可能です。詳しくは公式のドキュメントを参照してみてください。

まとめ

UIに多少こだわるのであれば、React Selectを使うのは結構良さそうです。カスタマイズ自体も難しくなく、使い易いなと感じました。

参考：公式ドキュメント

ー　この記事をシェアする？　ー

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。

Related / 関連記事