我有一个 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",
},
},
},
},
}),
],
};
参考这个 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>
);
}