react antd Tabs组件如何修改默认样式-友好的解决方法

Posted 2021-02-21 tu-0718

 

　　前言

　　当在项目中使用react antd各组件时，总有需要自定义css样式的时候，那应该怎么修改呢？

 

　　最简单粗暴的方法——覆盖原有样式

　　审查元素找到要修改的tabs组件类名，然后在css文件中重写该类样式使其覆盖原有样式，若无效果，添加!important

　　

　　最直接了当的方法——添加行内样式

　　但上述方法会导致全局tabs组件样式都被修改，为避免上述情况，直接在引入的tabs组件上添加行内样式style={{}}，

　　而上面方法同样有个问题，如果添加样式较多会影响代码整洁，并且有些组件样式嵌套层级较深，也无法直接添加行内样式

 

　　推荐方法

　　在tabs组件外面在嵌套一个div, 给这个div添加一个className, 比如 className="tutu"，

　　修改tabs组件默认样式就可直接用 .tutu ant-tabs这种形式，这样只会作用于当前页面下有添加该类的tabs组件，就不会污染全局了

 

　　注：另外，网上铺天盖地的博文大多说借助:golbal修改默认样式，但经本人多次测试并无效果