摘要：最近在使用做左侧导航的时候遇到了一点难缠的小问题，由于传统中标签包裹子元素组成链接的思维习惯，加上标签不能包裹子元素，导航部分一开始采用包裹的结构看起来不错，路由跳转正常，然而由于组件全都是行内样式，写在里的没有办法覆盖掉它，所以。
最近在使用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做左侧导航的时候遇到了一点难缠的小问题，由于传统中a标签包裹子元素组成链接的思维习惯，加上MenuItem标签不能包裹子元...
摘要：当年的加载在没有前端工程化之前，基本上是我们是代码一把梭，把所需要的库和自己的代码堆砌在一起，然后自上往下的引用就可以了。而且对于前后端的技术要求较高，所以对于项目未必是最有效的方案。 当年的 js 加载 在没有 前端工程化之前，基本上是我们是代码一把梭，把所需要的库和自己的代码堆砌在一起，然后自上往下的引用就可以了。 那个时代我们没有公用的cdn，也没有什么特别好的方法来优化加载j...
摘要：如果将添加到当前组件，并且当前组件由包裹，那么将引用最外层包装组件的实例而并非我们期望的当前组件，这也是在实际开发中为什么不推荐使用的原因，使用一个回调函数是一个不错的选择，也同样的使用的是回调函数来实现的。 回顾：上一篇讲了BrowserRouter 和 Router之前的关系，以及Router实现路由跳转切换的原理。这一篇来简短介绍react-router剩余组件的源码，结合官方文...
摘要：如果将添加到当前组件，并且当前组件由包裹，那么将引用最外层包装组件的实例而并非我们期望的当前组件，这也是在实际开发中为什么不推荐使用的原因，使用一个回调函数是一个不错的选择，也同样的使用的是回调函数来实现的。 回顾：上一篇讲了BrowserRouter 和 Router之前的关系，以及Router实现路由跳转切换的原理。这一篇来简短介绍react-router剩余组件的源码，结合官方文...
摘要：如果将添加到当前组件，并且当前组件由包裹，那么将引用最外层包装组件的实例而并非我们期望的当前组件，这也是在实际开发中为什么不推荐使用的原因，使用一个回调函数是一个不错的选择，也同样的使用的是回调函数来实现的。 回顾：上一篇讲了BrowserRouter 和 Router之前的关系，以及Router实现路由跳转切换的原理。这一篇来简短介绍react-router剩余组件的源码，结合官方文...
阅读 2517·2021-11-25 09:43
阅读 1084·2021-11-11 16:53
阅读 1819·2021-09-04 16:45
阅读 546·2019-08-30 15:44
阅读 803·2019-08-30 13:07
阅读 370·2019-08-29 16:06
阅读 1209·2019-08-29 13:43
阅读 1893·2019-08-27 11:04
