React修改Antd组件样式的方法_修改antd样式-程序员宅基地

技术标签： react.js  【React.js点滴知识 】  前端  javascript  

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.怎么把默认样式修改成自己想要的样式？

我们首先要知道组件的各种类名，以及它的默认样式是怎么样的，才方便去修改

  1. 打开控制台，可以直接按F12，也可以右击页面，点击“检查”

  2. Elements中可以看到你的页面元素，点击左边的箭头，可以移动到页面上，右边会显示相应的元素位置。
    在这里插入图片描述

  3. 可以清楚看到组件的默认样式以及class名称。如果对样式不熟悉，在下方能进行修改，可以直观的看到页面变化，没问题了再写到自己的样式文件中。如果有被——划掉的属性，说明优先级不够，可以通过 !important 去提高优先级。z-index是提高层的优先级，决定让哪一个层处于上层。
    在这里插入图片描述

补充：
如果项目没有开启CSS Modules，那么你在控制台看到的各种类名后面就不会加哈希字符串，那个时候就不需要用global去穿透，可以直接写antd的组件样式名即可覆盖样式。

上面是在less文件中修改组件样式，scss文件又有点不一样。需要新建.module.scss文件，并且可以用下面两种方法修改组件样式。第二种方法是全局修改了。

//index.module.scss
 :global {
     .textBox {
	     .ant-tabs-nav {
	         height: 30px;
	         width: 70px;
	     }
     }
 }
:global(.ant-tabs-nav){
  min-height: 50px;
}
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_17775997/article/details/128947316

智能推荐

【264】 Windows 批处理（CMD）-程序员宅基地

文章浏览阅读227次。参考：Windows Commands 微软官方帮助参考：DOS命令自学小窍门：巧用help命令参考：bat批处理的注释语句　　打开文件夹：start D:\abc打开D盘abc文件夹　　打开exe文件：D:\Windows-Linux\putty.exeputty.exe【在同一个文件夹内】　　输出空行：echo.参考：批处理 ..._windows gp批处理

数据分析和数据开发的区别_de 数据开发-程序员宅基地

文章浏览阅读4.6k次，点赞5次，收藏10次。数据分析（DA）和数据开发/数据仓库工程师（DE）究竟有什么区别，工作职责和工作内容上的差异是什么？一般都知道，数仓偏开发，主要是技术层面的工作，负责ETL、数仓、分布式计算、大数据运维等。数分偏业务，通过分析数据、建模、搭建指标体系，找出规律，给业务赋能。数仓同学日常负责一个业务整个数据体系的构建，也就是传说中的“数据仓库”。这个仓库中既有最底层的明细数据表，也有一层一层做过计算和组合的聚合数据表。数据分析师在日常工作中，经常会使用各种聚合表做一些简单的可视化或更复杂的分析，来监控业务的核心指标或者_de 数据开发

进程_进程的执行主体是处理器?-程序员宅基地

文章浏览阅读237次。本章知识点参考机械工业出版社操作系统概念第三章进程进程的基本概念:在讨论操作系统时:有个问题是关于如何称呼所有的CPU活动,在批处理系统中使用作业来表示 而在分时系统中使用用户程序(user program)或者任务(task)来表示。在当用户操作系统中用户也能同时运行多个程序比如文字处理程序，网页浏览，或者邮件收发程序。即使用户一次只能执行一个应用程序，而操作系统本身也需要程序去支持自身的行动，比如是内存管理等等，所有这些操作的活动称之为进程。什么是进程？关于什么是进程这个问题或许我们会认为._进程的执行主体是处理器?

springBoot JWT工具类_spring中解析jwt的工具类-程序员宅基地

文章浏览阅读2.9k次。@Configuration@ConfigurationProperties(prefix = "jwt.token")public class JwtTokenUtil { public static void setSecret(String secret) { JwtTokenUtil.secret = secret; } public static void setExpiration(int expiration) { JwtToken_spring中解析jwt的工具类

java中的常用工具类_java常用工具类-程序员宅基地

文章浏览阅读1.3k次，点赞5次，收藏10次。java中常用的工具类总结_java常用工具类

使用Lasso回归进行关键特征提取_r语言lasso回归提取关键特征-程序员宅基地

文章浏览阅读227次。在本文中，我们使用R语言中的glmnet包演示了如何使用Lasso回归进行关键特征提取的步骤。通过查看模型选择的关键特征，我们可以确定哪些特征对目标变量的预测最具有重要性。最后，我们使用选择的关键特征进行预测，并计算了模型在测试集上的均方误差。Lasso回归是一种常用的特征选择方法，可以帮助我们从给定的特征集中提取出最具预测能力的关键特征。通过以上步骤，我们成功地使用Lasso回归进行了关键特征提取，并评估了模型在测试集上的性能。最后，我们可以使用选择的关键特征来进行预测，并评估模型在测试集上的性能。_r语言lasso回归提取关键特征

随便推点

人工智能AI：TensorFlow Keras PyTorch MXNet PaddlePaddle 深度学习实战 part2_python深度学习:基于tensorflow和keras的计算机视觉项目实战-程序员宅基地

文章浏览阅读1k次。日萌社大数据、AI、python、C++学习资源链接：https://pan.baidu.com/s/1rXzERBEhVr08mEeKln8oqQ提取码：0t54链接：https://pan.baidu.com/s/1BkGfhuejd2JZznvJHaRiow提取码：am12tensorflow 2.0 深度学习（第一部分 part1）tensorflow 2.0 深度学习（第一部分 part2）tensorflow 2.0 深度学习（第一部分 part3）t..._python深度学习:基于tensorflow和keras的计算机视觉项目实战

java案例RSA分段加密解密，签名验签，公钥加密私钥解密，私钥加密公钥解密，解密乱码怎么解决_java rsa 公钥加密字符串私钥无法解密-程序员宅基地

文章浏览阅读1.3k次。java案例RSA分段加密解密，签名验签，公钥加密私钥解密，私钥加密公钥解密，解密乱码怎么解决_java rsa 公钥加密字符串私钥无法解密

常见的 Kerberos 错误消息_kadmin: communication failure with server while in-程序员宅基地

文章浏览阅读1.1w次，点赞2次，收藏10次。http://docs.oracle.com/cd/E19253-01/819-7061/trouble-6/index.html列出了 Kerberos 命令、Kerberos 守护进程、PAM 框架、GSS 接口、NFS 服务和 Kerberos 库的常见错误消息All authentication systems disabled; connection refused _kadmin: communication failure with server while initializing kadmin interfac

简单、实用、友好的xml文件格式错误检查方法-程序员宅基地

文章浏览阅读5.1k次。在使用python合并xml文件的时候，一直报格式有问题，检查了好多遍都没有检查到问题python报错：xml.etree.ElementTree.ParseError: mismatched tag: line 1382, column 14问题原因：xml格式真的有问题，但看着这个提示，再看自己的内容，怎么都看不出问题（自己写的东西，认同感太高……）解决方法：把这个xml文件用除IE外的浏览器打开，亲测谷歌、edge都会提示错误的具体位置坑：把这个xml文件用浏览器打开，如果

uniapp如何应用onNeedPrivacyAuthorization实现微信小程序隐私政策-程序员宅基地

文章浏览阅读6.3k次。微信小程序要求9.15日前实现隐私政策弹窗，但是uniapp文档一直没有更新，尝试直接使用，是可以生效的。_onneedprivacyauthorization

TCL学习之info命令_info exists-程序员宅基地

文章浏览阅读1.7w次，点赞7次，收藏63次。这篇文章主要讲一下info指令的相关用法。1.info命令列表该命令使用的匹配式规则和string match 一致，并且如果不适用匹配式，返回所有的项。序号命令描述1info commands ?pattern?返回匹配的命令列表2info exists varName变量存在返回1，否则返回03info_info exists

推荐文章

热门文章

相关标签