如何更改antd上传组件中的上传文本？答案

【问题标题】：How to change Uploading text in upload component in antd?如何更改antd上传组件中的上传文本？
【发布时间】：2019-11-09 18:34:16
【问题描述】：

我想在 antd 中上传时自定义上传组件中的“上传”文本。但是我在 antd doc 中找不到任何可以帮助我的东西。这是文档： https://ant.design/components/upload/

【问题讨论】：

尝试进入拥有上传进度条的组件并查看其属性，或者您可以尝试通过css或JS进入元素的id。你能告诉我一些代码吗？

标签： reactjs antd

【解决方案1】：

要改变content的位置，需要自定义top和left。我也更改了其他元素的 CSS 属性（加号图标的红色，另一张卡片的上传文本）。您可以根据需要更改它们。这是一个快速的demo。

/* plus +  icon*/
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: red;
}
/* Upload text*/
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: red;
}

/* Uploading... text*/
.ant-upload-list-item-info
  > span
  > div[class="ant-upload-list-item-uploading-text"] {
  visibility: hidden;
}


/* you need to customise top and left css attribute */
.ant-upload-list-item-info
  > span
  > div[class="ant-upload-list-item-uploading-text"]:after {
  content: "Wait ?";
  visibility: visible;
  display: block;
  position: absolute;
  padding: 1px;
  top: 10px;
  left: 10px;
}

【讨论】：