如何在Antd Upload组件中修改已上传项的文本颜色？

不用繁琐的renderItem重写整个上传项，直接通过CSS覆盖Antd的内置类名是最简便的方式，具体方案如下：

方案一：全局/局部CSS覆盖 #

Antd的已上传项文本对应的类名是.ant-upload-list-item-name，直接针对这个类名设置颜色即可：

全局生效 #

.ant-upload-list-item-name {
  color: #ff4d4f; /* 替换为你需要的颜色值 */
}

仅针对特定Upload组件生效 #

给目标Upload组件添加自定义类名，再通过后代选择器精准修改：

<Upload className="custom-upload" {...其他属性}>
  {/* 上传按钮内容 */}
</Upload>

对应的CSS：

.custom-upload .ant-upload-list-item-name {
  color: #52c41a;
}

方案二：CSS-in-JS方式（如styled-components） #

如果项目使用CSS-in-JS方案，可以直接封装一个带样式的Upload组件：

import styled from 'styled-components';
import { Upload } from 'antd';

const StyledUpload = styled(Upload)`
  .ant-upload-list-item-name {
    color: #1890ff;
  }
`;

// 使用时
<StyledUpload {...上传配置}>
  {/* 上传按钮 */}
</StyledUpload>

这种方式不需要改动组件的渲染逻辑，只通过样式覆盖就能快速修改文本颜色，比使用renderItem简洁很多。

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