在antd pro项目中,有一个头像上传前编辑的需求,在antd组件Upload中有一个上传前编辑的demo,用到一个antd-img-crop插件,用法很简单,只需要包裹Upload标签即可,具体API可以参考antd-img-crop的github地址
https://github.com/nanxiaobei/antd-img-crop
在使用过程中发现编辑弹出的modal框没有样式,
查阅antd-img-crop的github文档,发现对样式有这样的描述
样式
为防止覆盖自定义 antd 样式,antd-img-crop 中没有引入组件样式文件。
因此如果你的项目配置了 babel-plugin-import,且未使用 Modal 或 Slider,则需自行引入样式:
import 'antd/es/modal/style';
import 'antd/es/slider/style';
原先按照antd组件demo文档引入的只有
import React, { useState } from 'react';
import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
现在需要加入
...
import 'antd/es/modal/style';
编辑时弹出的modal框即可显示正常