React项目中NextUI TextArea组件背景色无法修改的解决方法

问题原因 #

你直接在主题colors里定义nextui-default-100变量的方式不符合NextUI的主题规范，NextUI的CSS变量是通过颜色组自动生成的，单独定义变量不会被组件识别。TextArea使用的--nextui-default-100属于default颜色组的100阶色值，需要在主题配置中正确声明default颜色组。

解决方案 #

修改tailwind.config.js中的主题配置，添加default颜色组来覆盖默认的--nextui-default-*变量：

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",
  plugins: [
    nextui({
      themes: {
        "blue-gray-dark": {
          extend: "dark",
          colors: {
            // 新增default颜色组，覆盖TextArea使用的default色系变量
            default: {
              100: "#4299e1", // 对应--nextui-default-100，即TextArea背景色
              200: "#3182ce",
              300: "#2b6cb0",
              DEFAULT: "#4299e1",
              foreground: "#E2E8F0",
            },
            background: "#1A202C",
            foreground: "#E2E8F0",
            primary: {
              50: "#2a4365",
              100: "#2c5282",
              200: "#2b6cb0",
              300: "#3182ce",
              400: "#4299e1",
              500: "#63b3ed",
              600: "#4299e1",
              700: "#3182ce",
              800: "#2b6cb0",
              900: "#2c5282",
              DEFAULT: "#2b6cb0",
              foreground: "#E2E8F0",
            },
            focus: "#3182ce",
          },
          layout: {
            disabledOpacity: "0.3",
            radius: {
              small: "4px",
              medium: "6px",
              large: "8px",
            },
            borderWidth: {
              small: "1px",
              medium: "2px",
              large: "3px", // 修正原代码笔误：3x → 3px
            },
          },
        },
      },
    }),
  ],
};

关键说明 #

• 原代码中borderWidth.large的3x是笔误，已修正为3px，避免布局异常。
• 定义default颜色组后，NextUI会自动生成--nextui-default-100、--nextui-default-200等对应变量，TextArea会自动读取这些值。
• 修改配置后需要重启开发服务器，确保主题配置生效。

备选方案：单独定制TextArea样式 #

如果主题配置仍未生效，可以直接给TextArea组件添加自定义className强制覆盖样式：

<TextArea className="bg-[#4299e1] text-[#E2E8F0]" />

或者使用全局CSS：

.nextui-textarea {
  background-color: #4299e1 !important;
}

内容的提问来源于stack exchange，提问作者user15505180