zoukankan      html  css  js  c++  java
  • react antd Tabs组件如何修改默认样式-友好的解决方法

      前言

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

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

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

      

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

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

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

      推荐方法

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

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

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

  • 相关阅读:
    03 . 前端之JavaScipt
    01 . 前端之HTML
    14 . Python3之MysSQL
    13 . Python3之并发编程
    01 . 消息队列之(Kafka+ZooKeeper)
    01 . 分布式存储之FastDFS简介及部署
    03 . Redis集群
    02 . Redis哨兵
    01 . RabbitMQ简介及部署
    01 . Redis简介及部署主从复制
  • 原文地址:https://www.cnblogs.com/tu-0718/p/12782524.html
Copyright © 2011-2022 走看看