1.修改默认组件样式和写自己组件样式的区别

当我们写自己的样式时，在组件页面中定义class名称，再在less文件中对这个class定义样式。

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

而修改默认的antd组件，则需要使用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;
        }
    }
}

为什么会需要这样呢？
因为我们启动了CSS Modules，它是一种技术流的组织css代码的策略，它将为css提供默认的局部作用域。因为构建工具会在编译的时候自动把我们的类名加上一个哈希字符串，例如上面我们写的类名为testBox，当多人开发的时候，有可能和别人的类名冲突，但是后面加上哈希字符串之后，它就保证了每一个选择器名称的独一无二，从而实现了局部作用域。

//编译之后可以在控制台看到类名后面有哈希字符串

因而如果我们想要覆盖antd的默认组件样式，用自己写的选择器名称是覆盖不了的，因为加了哈希字符串之后与组件默认样式的选择器名称不匹配；而使用global声明的class，不会在编译的时候被加上哈希字符串，从而可以实现覆盖默认样式的效果。

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

2.怎么把默认样式修改成自己想要的样式？

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