NextUIでInputなどに任意のTailwindCSSのカラーを適用する

概要

Inputにprimaryなどのセマンティックカラーではなく、TailwindCSSのbg-red-100みたいなカラーを指定したい。
NextUIのInputはclassNameを指定しても、色が変わらない。
NextUIのカラーのあたりのドキュメントを読んでも、なかなか分からなかったのでメモ。
Colors | NextUI - Beautiful, fast and modern React UI Library

結論

以下のようにclassNamesに指定すればok。
(以下だと、bg-gray-300が全体の色に適用される)

import React from "react";
import {Input} from "@nextui-org/react";

export default function NameInput() {
  return (
    <div className="w-full">
      <Input type="text" classNames={{inputWrapper: "text-black bg-gray-300"}} label="name" radius="none" placeholder="名前" />
    </div>
  );
}

他にも、classNames={{label: "bg-gray-300"}}とすれば、ラベル部分に色が適用され、
classNames={{input: "bg-gray-300"}}とすれば、入力部分だけ色が適用される。

公式ドキュメントの以下に書いてあった。
Input | NextUI - Beautiful, fast and modern React UI Library

• Primary
  

• bg-gray-300