React修改Antd组件样式的方法(react组件如何设置dom)

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

推荐整理分享React修改Antd组件样式的方法(react组件如何设置dom)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:react改变组件中input的值,react中修改state的方法,react改变组件中input的值,react-antd-admin,react-antd-admin,react 直接修改state,react 直接修改state,react组件如何设置dom,内容如对您有帮助，希望把文章链接给更多的朋友！

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

//index.jsimport 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.jsimport 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