如何修改Ant Design Input组件的placeholder颜色（React项目）

你的问题出在CSS选择器错误上——你用了.ant-picker-input（这是日期选择器的类），但Ant Design的Input组件内部的输入框对应的类是.ant-input，所以之前的样式根本匹配不到目标元素。下面给你几种可行的解决方法：

方法一：修正CSS选择器 #

直接修改你的Style.css，使用正确的选择器：

/* 全局样式下的写法 */
.mobStyle .ant-input::placeholder {
  color: #f0f0f0;
}

如果你的项目用了CSS Modules（样式文件命名类似Style.module.css），需要用:global来穿透样式隔离：

.mobStyle :global(.ant-input::placeholder) {
  color: #f0f0f0;
}

如果还是不生效，可以尝试增加选择器权重或者加!important（不推荐滥用，但可以临时测试）：

.mobStyle .ant-input::placeholder {
  color: #f0f0f0 !important;
}

方法二：使用Ant Design主题定制（推荐） #

如果想更优雅地修改，推荐用Ant Design的主题定制功能，支持全局或局部修改：

全局修改 #

在项目的主题配置文件（比如theme.config.js或config-overrides.js）中配置：

module.exports = {
  token: {
    colorPlaceholder: '#f0f0f0',
  },
};

局部修改（仅针对当前Input） #

用ConfigProvider包裹目标Input，单独设置主题：

import { Input, ConfigProvider } from 'antd';

// 在组件中使用
<ConfigProvider
  theme={{
    token: {
      colorPlaceholder: '#f0f0f0',
    },
  }}
>
  <Input
    className='mobStyle'
    style={{ width: '225px', height: '38px', background: '#ffffff00', color: '#fff' }}
    onChange={/* 你的逻辑 */}
    onBlur={onBlur}
    value={value}
    placeholder='Enter mobile number'
  />
</ConfigProvider>

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