1. The background

If you want to modify the style of antD’s Upload component, you can do it with N.

2. Knowledge

In less files, you cannot write the style name directly. The style definition is called.co1. It is wrong to refer to <Upload className= “co” /> in a page.

Since we used CSS-Loader in our project, the built-in CSS modules will compile all the class names into hash strings

For example, it looks like this

image.png

That’s the way to write it

import styles from './style.less';

 <Upload className={styles.co1} />
Copy the code

The Upload component in ANTD uses the.ant- Upload. Ant – Upload -select-picture-card style. What can I do to change this style?

Instead of making it a hash string, wrap it in global.

CSS Modules allow you to declare a global rule using the :global(.className) syntax. Any class declared like this will not be compiled into a hash string, so we can wrap everything in a less file with the :global syntax.

Example:

:global {. Price_protection_form_box {background: rgba(255, 255, 255,1); Border: 1 px solid rgba (221224227, 1); border-radius: 2px 6px 6px 6px; .title { height: 37px; Box-shadow: 0px 1px 0px 0px rgba(237,239,242,1); }}Copy the code

2. Final implementation

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>  .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; }}}Copy the code

Reference 3.

Blog.csdn.net/chunchun123…