最近在使用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!一切如愿以偿,买呆大喜,买呆大喜~❤
(蠢蠢的小问题,希望能够帮到人~