Ant-Design 组件底层样式修改。

修改默认的antd组件，需要使用global

import React, {
    
     useState, useEffect } from 'react';
import {
    
     Tabs, Rate, Steps } from 'antd';
import styles from './index.less';

const Index = (props) =>{
    
    
    return (
            <div className={
    
    styles.class_steps}>
                <Steps
                  progressDot
                  current={
    
    1}
                  direction="vertical"
                   items={
    
    [
                    {
    
    
                     title: 'DAY 1',
                     description:'123123',
                     subTitle: '12.23',
                    },
                   ]}
                />
              </div>
    )
}
 
export default Index;

.class_steps {
    
    
     :global {
    
    
          .ant-steps-item-title{
    
    
            display: flex;
            justify-content: space-between;
            padding-right: 0px;
          }
          .ant-steps-item-subtitle {
    
    
            font-size: 16px;
            font-weight: 600;
            color: #333333;
          }
        }
}

修改后Steps样式

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

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

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

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