资讯专栏INFORMATION COLUMN

Material-UI menuItem和NavLink组合使用时的样式控制

ISherry / 1203人阅读

摘要:最近在使用做左侧导航的时候遇到了一点难缠的小问题,由于传统中标签包裹子元素组成链接的思维习惯,加上标签不能包裹子元素,导航部分一开始采用包裹的结构看起来不错,路由跳转正常,然而由于组件全都是行内样式,写在里的没有办法覆盖掉它,所以。

最近在使用material-ui做左侧导航的时候遇到了一点难缠的小问题,由于传统中a标签包裹子元素组成链接的思维习惯,加上MenuItem标签不能包裹子元素,导航部分一开始采用NavLink包裹MenuItem的结构:

[/*data*/].map(link =>
    
      
    ,
)}

看起来不错,路由跳转正常,然而由于Material-UI组件全都是行内样式,写在NavLink里的style没有办法覆盖掉它,所以GG。

于是我尝试把样式写在MenuItem组件里,静态时候倒是好用了,但Material-UI的组件是没有activeStyle这个属性的,选中时候的样式又成了难题,可以说很气人了...

(顺带一提MenuItem组件其父组件Menu的selectedMenuItemStyle属性是不能在这种情况下其作用的~

在百般烦躁,文档都不知道翻了几遍之后,终于在国外友站上看到了大神提到的这个属性:
containerElement
(此处应有哆啦A梦道具声)
这个属性的描述如下:

The element to use as the container for the ListItem. Either a string to use a DOM element or a ReactElement. This is useful for wrapping the ListItem in a custom Link component. If a ReactElement is given, ensure that it passes all of its given props through to the underlying DOM element and renders its children prop for proper integration

是的你们看出来了,这是属性是属于ListItem的!MenuItem的文档我翻来覆去看了几百遍,没有这个属性!我本着死马当活马医的态度,拿来塞进了MenuItem里,仙女们,它管用!

于是,将代码改成以下结构之后,期待着问题解决,美滋滋:

[/*data*/].map(link =>
    
      }
    />,
)}

噫?并没有解决?
再次查看元素,绞尽脑汁捋了半天,发现MenuItem这个小婊砸在渲染的时候,会寄生在NavLink生成的a标签上,并用自己标签上的样式完全覆盖掉它的style属性。妈耶,简直不要脸咯。
再改:

[/*data*/].map(link =>
    
      }
    />,
)}

OK!一切如愿以偿,买呆大喜,买呆大喜~❤

(蠢蠢的小问题,希望能够帮到人~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112657.html

相关文章

  • Material-UI menuItemNavLink组合使用时的样式控制

    摘要:最近在使用做左侧导航的时候遇到了一点难缠的小问题,由于传统中标签包裹子元素组成链接的思维习惯,加上标签不能包裹子元素,导航部分一开始采用包裹的结构看起来不错,路由跳转正常,然而由于组件全都是行内样式,写在里的没有办法覆盖掉它,所以。 最近在使用material-ui做左侧导航的时候遇到了一点难缠的小问题,由于传统中a标签包裹子元素组成链接的思维习惯,加上MenuItem标签不能包裹子元...

    lx1036 评论0 收藏0
  • 谈谈前端工程化 js加载

    摘要:当年的加载在没有前端工程化之前,基本上是我们是代码一把梭,把所需要的库和自己的代码堆砌在一起,然后自上往下的引用就可以了。而且对于前后端的技术要求较高,所以对于项目未必是最有效的方案。 当年的 js 加载 在没有 前端工程化之前,基本上是我们是代码一把梭,把所需要的库和自己的代码堆砌在一起,然后自上往下的引用就可以了。 那个时代我们没有公用的cdn,也没有什么特别好的方法来优化加载j...

    paulli3 评论0 收藏0
  • react-router v4.x 源码拾遗2

    摘要:如果将添加到当前组件,并且当前组件由包裹,那么将引用最外层包装组件的实例而并非我们期望的当前组件,这也是在实际开发中为什么不推荐使用的原因,使用一个回调函数是一个不错的选择,也同样的使用的是回调函数来实现的。 回顾:上一篇讲了BrowserRouter 和 Router之前的关系,以及Router实现路由跳转切换的原理。这一篇来简短介绍react-router剩余组件的源码,结合官方文...

    luoyibu 评论0 收藏0
  • react-router v4.x 源码拾遗2

    摘要:如果将添加到当前组件,并且当前组件由包裹,那么将引用最外层包装组件的实例而并非我们期望的当前组件,这也是在实际开发中为什么不推荐使用的原因,使用一个回调函数是一个不错的选择,也同样的使用的是回调函数来实现的。 回顾:上一篇讲了BrowserRouter 和 Router之前的关系,以及Router实现路由跳转切换的原理。这一篇来简短介绍react-router剩余组件的源码,结合官方文...

    waterc 评论0 收藏0
  • react-router v4.x 源码拾遗2

    摘要:如果将添加到当前组件,并且当前组件由包裹,那么将引用最外层包装组件的实例而并非我们期望的当前组件,这也是在实际开发中为什么不推荐使用的原因,使用一个回调函数是一个不错的选择,也同样的使用的是回调函数来实现的。 回顾:上一篇讲了BrowserRouter 和 Router之前的关系,以及Router实现路由跳转切换的原理。这一篇来简短介绍react-router剩余组件的源码,结合官方文...

    CoorChice 评论0 收藏0

发表评论

0条评论

ISherry

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<