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

2024年2月3日 193次阅读 来源: fionahee

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

[/*data*/].map(link =>
    <NavLink
      key={link.icon}
      to={link.route}
      style={{backgroundColor: '#1e283c', color: 'white'}}
      activeStyle={{ backgroundColor: '#ffb440', color: 'black' }}
      exact
    >
      <MenuItem
        primaryText={link.label}
      />
    </NavLink>,
)}

看起来不错，路由跳转正常，然而由于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
      primaryText={link.label}
      containerElement={
        <NavLink
          key={link.icon}
          to={link.route}
          style={{ color: 'white', backgroundColor: '#1e283c' }}
          activeStyle={{ backgroundColor: '#ffb440', color: 'black' }}
          exact
        />
      }
    />,
)}

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

[/*data*/].map(link =>
    <MenuItem
      primaryText={link.label}
      style={{ color: 'white', backgroundColor: '#1e283c' }}
      containerElement={
        <NavLink
          key={link.icon}
          to={link.route}   
          activeStyle={{ backgroundColor: '#ffb440', color: 'black' }}
          exact
        />
      }
    />,
)}

OK！一切如愿以偿，买呆大喜，买呆大喜~❤

（蠢蠢的小问题，希望能够帮到人~

    原文作者：fionahee
    原文地址: https://segmentfault.com/a/1190000011830996
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞