Search code examples
javascriptfile-uploadantd

How to change the color of the uploaded item's text in the 'Upload' component in antd?

I want to change the uploaded item's text color in the 'Upload' component but I can't find an easy way to do this.

screenshot

I know there's the 'renderItem' prop but it seems too messy and verbose. Is there any easier way to change color?

Solution

  • In my case I've ended up using only CSS. I've created a global.css file, imported it in root of my project and changed some antd classes styles:

    // import global.css in your root file
// index.jsx/tsx, _app.jsx/tsx

import 'path/to/globals.css'
...

//global.css
.ant-upload-list-item-name, // changes the name of item
.ant-upload-icon > .anticon, // changes left icon
.ant-btn-icon > .anticon { // changes right button icon color
  color: blue !important; // don't forget to add !important so antd will not override this
}

    Result: Result