如何修改Ant Design中RangePicker组件的文本颜色？

直接给RangePicker的style属性设置文字颜色不生效，是因为该样式只会作用于组件外层容器，而实际显示文本的输入框是嵌套的子元素，需要针对性地修改内部元素样式。下面提供几种可行方案：

方案一：通过自定义className + CSS 定位内部输入框 #

你已经给组件添加了className='range-picker'，可以通过CSS选择器直接定位到内部的输入框元素：

/* 全局样式文件中添加 */
.range-picker .ant-picker-input input {
  color: orange;
}

如果使用CSS Modules，需要用:global来穿透类名：

/* CSS Modules 文件中 */
:global(.range-picker .ant-picker-input input) {
  color: orange;
}

方案二：通过inputProps直接给内部输入框传样式 #

利用Antd组件提供的inputProps属性，将样式直接传递给内部的输入框组件，这是更直接的方式：

import moment from 'moment'
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

<RangePicker
  className='range-picker'
  format={'DD-MM-YYYY'}
  inputProps={{
    style: { color: 'orange' }
  }}
/>

方案三：使用CSS-in-JS（如@ant-design/cssinjs） #

如果你的项目使用了Antd的CSS-in-JS方案，可以通过css属性来编写样式：

import { DatePicker } from 'antd';
import { css } from '@ant-design/cssinjs';

const { RangePicker } = DatePicker;

const pickerStyle = css`
  .ant-picker-input input {
    color: orange;
  }
`;

<RangePicker
  format={'DD-MM-YYYY'}
  className={pickerStyle}
/>

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