NextJS+Tailwind+NextUI环境下修改Input背景色失败求助

问题背景 #

使用NextJs、TailwindCss和NextUI开发时，不满意Input组件默认的白色背景，尝试内联样式、CSS变量等方法后仍未达到预期效果。

现有代码 #

Input组件代码 #

<div className="flex flex-col h-screen bg-white-mode-background dark:bg-dark-mode-background items-center justify-center">
    <Header />
    <div className="h-fit w-fit rounded border  border-white-mode-border text-white-mode-text dark:text-dark-mode-text dark:border-dark-mode-border  items-center mt-16">
        <form onSubmit={handleSubmit} className="bg-transparent p-4">
            <h1 className="text-1xl font-bold mb-4 text-center">Crear Evento</h1>
            <Input placeholder="Next UI" css={{ $$inputColor: "black" }} />
            <Button type="submit" color="success">
                Crear Evento
            </Button>
        </form>
    </div>
</div>

tailwind.config.js配置 #

/** @type {import('tailwindcss').Config} */
const { nextui } = require("@nextui-org/react");
const colors = require('tailwindcss/colors')
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    colors: {
      'primary': '#464382',
      'secondary': '#8680ff',
      'accent': '#7a75ff',
      'dark-mode-border': '#212121',
      'dark-mode-navbar': '#060606',
      'dark-mode-background': '#080808',
      'dark-mode-slider': '#000000',
      'dark-mode-text': '#ffffff',
      'dark-mode-hover': '#7a75ff',
      'dark-mode-card': '#18181b',
      'dark-mode-searcher-border': '#3f3f46',

      'white-mode-border': '#e5e5e5',
      'white-mode-container': '#fff',
      'white-mode-background': '#fff',
      'white-mode-navbar': '#fff',
      'white-mode-slider': '#fff',
      'white-mode-text': '#000000',
      'white-mode-hover': '#ebebed',
      'white-mode-card': '#18181b',
      ...colors,
    }
  },
  plugins: [nextui()],
}

尝试过的无效样式 #

<Input
    id="eventName"
    name="eventName"
    placeholder="Nombre del evento"
    className="mb-4"
    style={{
        backgroundColor: '#18181b',
        color: '#ffffff',
        borderColor: '#ffffff',
    }}
/>
<Input
    type="date"
    id="eventDate"
    name="eventDate"
    className="mb-4"
    style={{
        background: '#18181b',
        color: '#ffffff',
        border: 'none', 
    }}
/>

解决方案 #

方法1：通过css prop穿透修改内部元素 #

NextUI的Input组件样式封装在内部的.input-wrapper和.input-content等元素中，普通内联样式无法穿透到这些子元素，需用组件自带的css prop精准选择内部元素覆盖样式：

<Input
  id="eventName"
  name="eventName"
  placeholder="Nombre del evento"
  className="mb-4"
  css={{
    // 修改输入框容器的背景色与边框
    '& .input-wrapper': {
      backgroundColor: '$dark-mode-card',
      borderColor: '$dark-mode-searcher-border',
      '&:hover': {
        borderColor: '$dark-mode-hover'
      },
      '&:focus-within': {
        borderColor: '$accent'
      }
    },
    // 修改输入文字颜色
    '& .input-content': {
      color: '$dark-mode-text'
    },
    // 修改占位符颜色及透明度
    '&::placeholder': {
      color: '$dark-mode-text',
      opacity: 0.7
    }
  }}
/>

方法2：全局自定义NextUI主题（推荐） #

若需所有Input组件统一该样式，可在tailwind配置中全局修改NextUI主题：

// tailwind.config.js
module.exports = {
  // ...其他原有配置
  plugins: [
    nextui({
      themes: {
        dark: {
          colors: {
            // 复用已定义的颜色变量
            primary: '#464382',
            darkModeCard: '#18181b',
            darkModeText: '#ffffff',
            darkModeSearcherBorder: '#3f3f46',
            accent: '#7a75ff'
          },
          components: {
            Input: {
              styles: {
                base: {
                  inputWrapper: {
                    backgroundColor: '$darkModeCard',
                    borderColor: '$darkModeSearcherBorder',
                    '&:hover': {
                      borderColor: '$accent'
                    },
                    '&:focus-within': {
                      borderColor: '$accent'
                    }
                  },
                  input: {
                    color: '$darkModeText'
                  },
                  placeholder: {
                    color: '$darkModeText',
                    opacity: 0.7
                  }
                }
              }
            }
          }
        },
        light: {
          // 配置浅色模式下的Input样式
          components: {
            Input: {
              styles: {
                base: {
                  inputWrapper: {
                    backgroundColor: '$white-mode-background',
                    borderColor: '$white-mode-border'
                  },
                  input: {
                    color: '$white-mode-text'
                  },
                  placeholder: {
                    color: '$white-mode-text',
                    opacity: 0.7
                  }
                }
              }
            }
          }
        }
      }
    })
  ]
}

说明 #

之前的方法无效是因为NextUI组件样式层级封闭，内部子元素有独立样式规则，普通内联样式无法穿透覆盖。使用组件提供的css prop或全局主题配置，可以精准修改内部元素的样式。

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