antd中头像上传前编辑antd-img-crop插件弹出modal没有样式的问题

See you

于 2020-08-18 10:47:51 发布

阅读量1.8k

点赞数 4

文章标签： react antd antd-img-crop modal upload

本文链接：https://blog.youkuaiyun.com/Mine____/article/details/108071615

版权

在antdpro项目中，使用antd-img-crop插件进行头像上传前编辑时，遇到编辑弹窗无样式问题。解决方案是在项目中手动引入antd的Modal和Slider样式，确保编辑功能正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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框即可显示正常
在这里插入图片描述