修改 antd 的 Upload 组件的样式

最新推荐文章于 2024-07-02 15:44:02 发布

张云飞VIR

最新推荐文章于 2024-07-02 15:44:02 发布

阅读量4.4k

点赞数 2

本文链接：https://blog.csdn.net/vir56k/article/details/117020053

版权

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;
    }
  }
}