I'm trying to wrap a Material-UI <ListItem button> into a react-router <NavLink>. Basically it's working fine, but I noticed that the <NavLink> Component changes the ripple colors on the <ListItem button>. If I wrap It the other way round (NavLink in ListItem) I won't be able to style the <ListItem> with classes.linkActive so that's not an option.

here is a minimal code-sample showing the problem:

I've been looking through the ponents a bit but I'm kinda new to react, so any Ideas on how to prevent NavLink to change the colors or any way to tell the ListItem to use the default/theme palette again?

I'm trying to wrap a Material-UI <ListItem button> into a react-router <NavLink>. Basically it's working fine, but I noticed that the <NavLink> Component changes the ripple colors on the <ListItem button>. If I wrap It the other way round (NavLink in ListItem) I won't be able to style the <ListItem> with classes.linkActive so that's not an option.

here is a minimal code-sample showing the problem: https://codesandbox.io/s/xrxl90jv04

I've been looking through the ponents a bit but I'm kinda new to react, so any Ideas on how to prevent NavLink to change the colors or any way to tell the ListItem to use the default/theme palette again?

• javascript
• reactjs
• react-router
• material-ui

• Do you think you could put your code in a CodeSandbox or something similar? I'm not quite sure I understand your issue. – Tholle Commented Jul 6, 2018 at 10:37
• I'm sorry I can't because it's for my employer... – Andreas Linden Commented Jul 6, 2018 at 10:38
• Sure, not all of it, but a Minimal, Complete, and Verifiable example. – Tholle Commented Jul 6, 2018 at 10:38
• It's just like: normal ListItem ponent has grey ripple. If I wrap it into a NavLink ponent the ripple bees red (and additionally there it gets a blue background on mouseUp) – Andreas Linden Commented Jul 6, 2018 at 10:40
• Alright. I'm not sure how you are writing your CSS, but your could add this CSS to them. – Tholle Commented Jul 6, 2018 at 10:44

2 Answers 2

wow, as most of the time, I answer my questions myself. Thanks to Tholle who told me to create a minimal working example, I noticed that the ripple color inside of <NavLink> depends on the text color (well basically it was only the color of the text-decoraion underline). so I simply added a style color: 'inherit' to the <NavLink> which is working like a charm :)

updated code is in the example: https://codesandbox.io/s/xrxl90jv04

Thanks to answer above I can do it, so, for posterior versions we have:

import React from 'react'
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import { NavLink as RouterLink } from 'react-router-dom';
import { ListItem, ListItemButton, ListItemText } from '@mui/material';
const LinkRouted = styled(ListItem)({
    color: "inherit"
})
export const ItemNavbar = (props) => {
  const {label:primary, route:to} = props.opt
  return (
    <LinkRouted ponent={RouterLink} to={to} disablePadding>
        <ListItemButton>
            <ListItemText primary={primary} />
        </ListItemButton>
    </LinkRouted>
  )
}
ItemNavbar.propTypes = {
    opt: PropTypes.object.isRequired
};