antd react如何改写upload组件的样式

antd 是一个基于 Ant Design 设计语言的 React UI 组件库，它提供了一套丰富的组件来帮助开发者快速构建高质量的 Web 应用。如果你想改写 antd 中的 Upload 组件的样式，可以通过以下几种方法实现：

1. **使用 className 或者 classNamePrefix：**
antd 的组件都支持通过 className 属性添加自定义的样式类，或者使用 classNamePrefix 来为内部所有样式类添加一个前缀，从而实现样式的覆盖。例如：

   <Upload
     className="custom-upload"
     // 或者
     // classNamePrefix="custom-upload"
   >
     <Button>点击上传</Button>
   </Upload>

然后在你的 CSS 文件中：

   .custom-upload .ant-upload {
     /* 自定义上传区域的样式 */
   }

2. **使用 CSS-in-JS：**
如果你使用 CSS-in-JS 的方式来编写样式，可以直接在组件中使用样式对象来定义样式。例如使用 styled-components 或 emotion 这类库：

   import styled from 'styled-components';

   const StyledUpload = styled(Upload)`
     .ant-upload {
       /* 自定义样式 */
     }
   `;

   <StyledUpload>
     <Button>点击上传</Button>
   </StyledUpload>

3. **修改 Less 变量：**
antd 默认使用 Less 作为样式预处理器，它提供了一套默认的主题变量。你可以通过覆写这些变量来全局改变组件的样式。具体方法是创建一个自定义的主题样式文件，并通过配置导入它：

   // custom-antd.less
   @import '~antd/dist/antd.less'; // 引入 antd 默认样式

   // 自定义 Upload 样式
   .ant-upload {
     .ant-upload-select {
       /* 自定义上传按钮的样式 */
     }
   }

然后在你的应用中配置：

   // 引入自定义样式文件
   import './custom-antd.less';

4. **直接修改组件内部 CSS：**
直接通过 CSS 选择器找到 Upload 组件的内部元素并进行样式覆盖。这种方法虽然直接，但不推荐使用，因为它违背了封装原则，可能会在未来的版本中因组件内部实现的改变而导致样式失效。

   .ant-upload.ant-upload-select {
     /* 自定义上传按钮的样式 */
   }