更改颜色文本区域NextUI

Question

我有一个 React JS Web 应用程序。我有一个自定义主题，所有组件都会改变颜色，但 TextArea 不会。当我观看 Inspector 时，TextAra 使用“--nextui-default-100: 240 3.7% 15.88%;”但我尝试将其定义为 tailwind.config.js 但仍然不起作用。

如何使用 NextUI 更改 TextArea 的背景颜色？

const { nextui } = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class", // or 'media'
  plugins: [
    nextui({
      themes: {
        "blue-gray-dark": {
          extend: "dark",
          colors: {
            "nextui-default-100": "#4299e1", 
            background: "#1A202C",  // Teinte gris foncé
            foreground: "#E2E8F0",  // Gris clair pour le texte
            primary: {
              50: "#2a4365",      // Bleu foncé pour les nuances légères
              100: "#2c5282",
              200: "#2b6cb0",
              300: "#3182ce",
              400: "#4299e1",
              500: "#63b3ed",     // Bleu principal
              600: "#4299e1",
              700: "#3182ce",
              800: "#2b6cb0",
              900: "#2c5282",
              DEFAULT: "#2b6cb0",
              foreground: "#E2E8F0", // Gris clair pour le texte sur fond bleu
            
            },
            focus: "#3182ce", // Bleu plus vif pour les éléments en focus
          },
          layout: {
            disabledOpacity: "0.3",
            radius: {
              small: "4px",
              medium: "6px",
              large: "8px",
            },
            borderWidth: {
              small: "1px",
              medium: "2px",
              large: "3x",
            },
          },
        },
      },
    }),
  ],
};

Answer 1

参考这个 https://nextui.org/docs/components/input#custom-styles

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

export default function App() {
  return (
    <div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
      <Input
        label="Search"
        isClearable
        radius="lg"
        classNames={{
          label: "text-black/50 dark:text-white/90",
          input: [
            "bg-transparent",
            "text-black/90 dark:text-white/90",
            "placeholder:text-default-700/50 dark:placeholder:text-white/60",
          ],
          innerWrapper: "bg-transparent",
          inputWrapper: [
            "shadow-xl",
            "bg-default-200/50",
            "dark:bg-default/60",
            "backdrop-blur-xl",
            "backdrop-saturate-200",
            "hover:bg-default-200/70",
            "dark:hover:bg-default/70",
            "group-data-[focus=true]:bg-default-200/50",
            "dark:group-data-[focus=true]:bg-default/60",
            "!cursor-text",
          ],
        }}
        placeholder="Type to search..."
        startContent={
          <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
        }
      />
    </div>
  );
}