📝react-select×tailwindCSS

はじめに

自分用📝です。

react-selectの色を変更したくて調べると、style属性のカスタマイズ方法が多々出てきて、「いやいや私はtailwindCSSを使っているからには極力className内でどうにかしたいんだ」と踏ん張ったので、誰かのためにもなるかもと思って一応公開しておく程度の内容です。

結論

<Controller
          name="status"
          control={control}
          render={({ field }) => (
            <Select
              options={options}
              value={options.find(option => option.value === field.value)}
              onChange={newValue => {
                field.onChange(newValue?.value);
              }}
              classNames={{
                control: () =>
                  "!border-dark_brown !outline-none !text-dark_brown",
                placeholder: () => "!text-dark_brown ",
                dropdownIndicator: () => " !text-dark_brown",
                indicatorSeparator: () => "!bg-dark_brown",
              }}
            />
          )}

補完機能に頼りました。

ひたすら「ここ変えたらどうなるやろ？やってみる。」を繰り返して色変えていきました。
ここはどこを指しているかネーミングから想像できたらいいんですが、「ワタシ、エイゴ、ワカラナイ。」となると仕方ない力技です。片っ端から試す。

おわりに

現場からは以上です。