antd 覆盖原有样式

在使用 antd 的时候 往往需要覆盖原有的样式

例如覆盖 Upload 组件大小  想要把下面的 Upload 组件调大

代码

// index.module.css
.upload_size  :global .ant-upload.ant-upload-select-picture-card {
        width:220px ;
        height:130px;
        border:'0px solid red';
        background-color: #F2F2F2;
    }




// home.jsx
<Upload
    name="file"
	listType="picture-card"								
	valuePropName="SLT"
    className={styles.upload_size}      // 直接引入即可
	showUploadList={false}
	action="/api/upload_oss"
	headers={{ Authorization: 'Bearer ' + Cookies.get('token') }}
	beforeUpload={beforeUpload}
	onChange={UploadSideAvatar}
>
      <div>{userAvatar ? <img src={userAvatar} alt="avatar" /> : uploadButton}</div>
</Upload>

结果如下：

有时候 会发现元素直接渲染到 body 下面，样式不生效，需要在组建中添加如下代码：如

<Select getPopupContainer={node => node.parentNode} />