如何修改Ant Design DatePicker组件的占位符文字颜色

Ant Design日期选择器的占位符样式通过input的::placeholder伪类控制，可通过以下两种方式修改：

方案1：CSS样式覆盖 #

该方案适用于所有Ant Design版本，可灵活控制全局或局部样式。

基础写法 #

/* 全局修改所有日期选择器（含范围选择器）的占位符颜色 */
.ant-picker-input > input::placeholder {
  /* 替换为你需要的颜色值 */
  color: #999 !important;
  /* 部分浏览器默认给placeholder加了透明度，设置为1保证颜色显示准确 */
  opacity: 1;
}

/* 单独修改禁用状态下的占位符颜色 */
.ant-picker-disabled .ant-picker-input > input::placeholder {
  color: #ccc !important;
}

/* 单独修改范围选择器的占位符颜色 */
.ant-picker-range .ant-picker-input > input::placeholder {
  color: #666 !important;
}

特殊场景适配 #

• 如果你使用Vue框架且style标签添加了scoped属性，需要使用深度选择器包裹样式，否则不生效：

:deep(.ant-picker-input > input::placeholder) {
  color: #999 !important;
  opacity: 1;
}

• 如果你使用React搭配CSS Modules，需要使用全局选择器包裹样式：

:global(.ant-picker-input > input::placeholder) {
  color: #999 !important;
  opacity: 1;
}

• 如果仅需要修改局部某一个日期选择器的占位符颜色，可以给组件添加自定义类名，避免全局污染：

// 给日期选择器添加自定义类名
<DatePicker className="custom-date-picker" />

.custom-date-picker .ant-picker-input > input::placeholder {
  color: #999 !important;
  opacity: 1;
}

方案2：Ant Design v5 主题配置 #

如果使用Ant Design v5版本，可以通过ConfigProvider的主题配置直接修改，无需额外写CSS：

import { ConfigProvider, DatePicker } from 'antd';

// 仅修改日期选择器的占位符颜色
const App = () => (
  <ConfigProvider
    theme={{
      components: {
        DatePicker: {
          colorTextPlaceholder: '#999'
        }
      }
    }}
  >
    <DatePicker />
  </ConfigProvider>
);

如果需要全局修改所有组件的占位符颜色，可以将配置放在token层级下：

<ConfigProvider
  theme={{
    token: {
      colorTextPlaceholder: '#999'
    }
  }}
>
  {/* 全局所有组件的占位符都会生效 */}
</ConfigProvider>

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