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

 

  前言css

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

 

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

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

  

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

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

  而上面方法一样有个问题,若是添加样式较多会影响代码整洁,而且有些组件样式嵌套层级较深,也没法直接添加行内样式import

 

  推荐方法方法

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

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

 

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

相关文章
相关标签/搜索