• 18 自定义NavLink


     如图,如果我们希望自定义选中的路由链接样式,我们可以自定义 NavLink

    第一步,定义一个 MyNAVLink组件,这个组件用来渲染 NavLinK 组件标签

    其中,activeClassName 是 react-router 中的标签属性,{ ... this.props } 表示将外部传入的所有属性全局传到 MyNavLink 组件标签中

    我们定义的 current 样式是:

    这里如果不用 !important 增加权重,我们定义的current 样式会被覆盖

    第二步,将 <NavLink > 标签 改为我们自己定义的 <MyNavLink>标签:

    这样就成功修改了NavLink 的默认样式,以后如果希望使用我们自定义的样式,只需要使用 MyNavLink 标签即可。

  • 相关阅读:
    网络面试题2
    网络
    Linux os
    操作系统面试题2
    操作系统面试题
    Linux
    算法-字符全排列
    第k大数问题
    地址
    ListView里面嵌套CheckBox
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/12510981.html
Copyright © 2020-2023  润新知