如何修改Antd中Upload.Dragger的高度？（antd-3.22.0+React16.3.2）

我之前也遇到过Antd 3.x版本里Upload.Dragger样式难调整的问题，直接加style或者外层套div确实不太好使，因为组件内部有默认的层级和样式优先级。给你几个亲测可行的解决方案：

方案1：自定义CSS类覆盖默认样式 #

Antd的Dragger组件内部默认使用.ant-upload-drag类来控制容器样式，我们可以通过提高CSS优先级来覆盖它的高度和内边距：

首先写一个自定义样式类：

.custom-dragger-container {
  height: 45px !important;
  padding: 0 !important; /* 去掉默认的上下padding，避免内容撑高容器 */
}

然后把这个类加到Dragger组件上：

<Upload.Dragger className="custom-dragger-container">
  <p className="ant-upload-text">Browse or drag file</p>
</Upload.Dragger>

如果不想用!important，可以给选择器加父级类来提升优先级，比如.your-parent-component .ant-upload-drag，这样更符合CSS规范。

方案2：Inline Style 直接控制内部元素 #

如果不想额外写CSS类，也可以直接修改Dragger内部的容器样式，因为Dragger的高度被内部的.ant-upload容器间接影响：

<Upload.Dragger style={{ height: '45px', padding: 0 }}>
  <div className="ant-upload" style={{ height: '100%', display: 'flex', alignItems: 'center' }}>
    <p className="ant-upload-text">Browse or drag file</p>
  </div>
</Upload.Dragger>

这里把内部的.ant-upload容器高度设为100%，同时加上flex布局让文字垂直居中，避免45px高度下文字错位。

方案3：Less变量全局修改（适合用Less的项目） #

如果你的项目用Less管理样式，可以直接修改Antd的内置变量，全局统一Dragger的样式：

// 在引入Antd样式前定义变量
@upload-dragger-height: 45px;
@upload-dragger-padding: 0;

之后正常引入Antd的Less样式文件，所有Upload.Dragger都会自动应用这个高度设置，适合需要全局统一样式的场景。

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