How React modifies the style of Antd components

1. The difference between modifying the default component style and writing your own component style

When we write our own style, define the class name in the component page, and then define the style for this class in the less file.

//index.js
import React,{useState} from 'react';
import styles from './index.less';

const Index = (props) =>{

    return (
        <div className={styles.testBox}>

        </div>
    )
}

export default Index;

//index.less
.testBox {
    width:100px;
    height: 100px;
}

To modify the default antd component, you need to use global

//index.js
import React,{useState} from 'react';
import styles from './index.less';
import {Tabs} from 'antd';
const {TabPane} = Tabs;

const Index = (props) =>{

    return (
        <div className={styles.testBox}>
            <Tabs onChange={} activeKey={}>
                <TabPane tab="" key="">

                </TabPane>
            </Tabs>
        </div>
    )
}

export default Index;

//index.less
.testBox {
    width:100px;
    height: 100px;
    :global {
        .ant-tabs-nav {
            height: 30px;
            width: 70px;
        }
    }
}

Why is this necessary?
Since we started CSS Modules, it is a technical flow strategy for organizing CSS code, which will provide default local scope for CSS. Because the build tool will automatically add a hash string to our class name when compiling. For example, the class name we wrote above is called testBox. When multiple people develop, it may conflict with other people’s class names, but later After adding the hash string, it ensures the uniqueness of each selector name, thus achieving local scope.

//After compiling, you can see the hash string after the class name in the console

Therefore, if we want to override antd's default component style, we can't cover it with our own selector name, because after adding the hash string, it does not match the selector name of the component's default style; and using the global declared class, The hash string will not be added at compile time, so that the effect of overriding the default style can be achieved.

但是用global最好在外面嵌套一层自己的div，不然会全局修改，也会修改掉其他同事的组件样式

2. How to modify the default style to the style you want?

We first need to know the various class names of the component and what its default style is, so that it is convenient to modify

1. Open the console, you can press F12 directly, or you can right-click the page and click "Check"

2. You can see your page elements in Elements, click the arrow on the left to move to the page, and the corresponding element position will be displayed on the right.
   

3. You can clearly see the default style and class name of the component. If you are not familiar with the style, you can modify it below, you can see the page changes intuitively, and then write it into your own style file when there is no problem. If there is an attribute crossed out by --, it means that the priority is not enough, you can use !important to increase the priority. z-index is to increase the priority of the layer and decide which layer is on the top.
   

Supplement:
If CSS Modules is not enabled in the project, then the hash string will not be added after the various class names you see in the console. At that time, there is no need to use global to penetrate, and you can directly write the component style name of antd to override the style.

The above is to modify the component style in the less file, and the scss file is a little different. A new .module.scss file needs to be created, and the component style can be modified in the following two ways. The second method is to modify it globally.

//index.module.scss
 :global {
     .textBox {
	     .ant-tabs-nav {
	         height: 30px;
	         width: 70px;
	     }
     }
 }
:global(.ant-tabs-nav){
  min-height: 50px;
}