React修改Antd组件的样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了React修改Antd组件的样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

修改默认的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样式
React修改Antd组件的样式

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

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

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

但是用global最好在外面嵌套一层自己的div，不然会全局修改，也会修改掉其他同事的组件样式。文章来源地址https://www.toymoban.com/news/detail-505777.html

到了这里，关于React修改Antd组件的样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！