react ant design样式覆盖问题
更新时间：2023年11月14日 10:56:24 作者：仙女爱吃鱼
这篇文章主要介绍了react ant design样式覆盖问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react ant design样式覆盖
1.为防止样式污染在组件外部添加单独的class名或者id名
2.使用:global()关键字把要修改的class名括起来
<div id={styles.tabContainer}>
<Tabs defaultActiveKey={tabList[0].id} onChange={this.callback} >
{Array.isArray(tabList) &&
tabList.map((item, index) => <TabPane tab={item.name} key={item.id}></TabPane>)}
</Tabs>
#tabContainer {
:global(.ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
text-shadow: 0 !important;
/* **单行文本超出 显示省略号** */
/* 1、强制文本一行显示 */
white-space: nowrap;
/* 2、超出的内容隐藏 */
overflow:hidden;
/* 3、文本超出显示省略号 */
text-overflow:ellipsis;
}
}
react覆盖antd库样式，覆盖组件样式，局部改动不影响全局的方法
场景
比如我想覆盖当前页面的上传组件样式，那我就在这个上传组件外面套一层div，div的class名叫couponUpload，然后在couponUpload里面写需要更改的类名即可，注意：外面一定要套上:global。
less文件：
引入文件：
使用：
效果图
是可以覆盖的，而且不会影响到全局
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要跟大家介绍了关于React中事件处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习React具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
useEffect()是react中的hook函数,作用是用于创建由渲染本身引起的操作,介绍了依赖项数组不同的区别,对react useEffect()使用相关知识感兴趣的朋友一起看看吧2024-05-05
React中是单向数据流,数据只能从父组件通过属性的方式传给其子组件,本文主要介绍了React父子组件互相通信的实现示例,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
React中使用async validator进行表单验证的实例代码
react上进行表单验证是很繁琐的，在这里使用async-validator处理起来就变的很方便了，接下来通过本文给大家介绍React中使用async validator进行表单验证的方法,需要的朋友可以参考下2018-08-08
很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题，本文主要介绍了基于React封装组件的实现步骤，感兴趣的可以了解一下2021-11-11
这篇文章主要介绍了react学习笔记之state以及setState的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用，是目前非常主流的国际化解决方案。这篇文章主要介绍了React国际化react-i18next的相关知识,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了Electron整合React使用搭建开发环境，本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下2020-06-06
这篇文章主要给大家介绍了关于在React.js中使用collections时key的重要性，注意：一定不能不能忘了key，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面跟着小编来一起学习学习吧。2017-08-08
这篇文章主要介绍了React中的不可变值的相关资料，帮助大家更好的理解和学习使用react.js，感兴趣的朋友可以了解下2021-04-04
最新评论