修改 antd 的 Upload 组件的样式
1. 背景
想修改 antd 的 Upload 组件的样式，折腾N就终于搞定。
2. 知识点
在 less 文件中，不能直接写样式名，样式定义叫做 .co1 ,在页面中这么引用 <Upload className=”co“ /> 是错误的。
因为我们在项目中使用了css-loader,自带的css modules会把所有类名编译为哈希字符串
比如，变成这样是了
image.png
要这么写才对
import styles from './style.less';
<Upload className={styles.co1} />问题来了，跟踪css样式发现 antd 中的 Upload 组件用了 .ant-upload.ant-upload-select-picture-card 这个样式。想修改这个样式怎么做呢？
不想让它 变成哈希字符串，就用 global 来包裹它。
CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串，因此我们可以在less文件中，所有内容外用:global语法包裹住。
示例：
:global {
.price_protection_form_box{
background: rgba(253,253,253,1);
border: 1px solid rgba(221,224,227,1);
border-radius: 2px 6px 6px 6px;
.title {
height: 37px;
box-shadow: 0px 1px 0px 0px rgba(237,239,242,1);
}
}2.最终实现
import styles from './style.less';
<Upload className={styles.co1}
listType="picture-card"
fileList={fileList}
onRemove={onRemove}
accept="image/*"
beforeUpload={(file, fileList) => {
onFileListChange({ fileList });
}}>
<span className="text">+</span>
</Upload>
// less 样式文件里这么写：
.co1 {
:global {
.ant-upload.ant-upload-select-picture-card {
width:220px;
height:130px;
border:'0px solid red';
background-color: #F2F2F2;
}
.text{
color: #949494;
font-size:40px;
}
}
}3. 参考
https://blog.csdn.net/chunchun1230/article/details/112800360
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录