3

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 components 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?

Andreas Linden
  • 12,489
  • 7
  • 51
  • 67
  • Do you think you could put your code in a [CodeSandbox](https://codesandbox.io/dashboard/recent) or something similar? I'm not quite sure I understand your issue. – Tholle Jul 06 '18 at 10:37
  • I'm sorry I can't because it's for my employer... – Andreas Linden Jul 06 '18 at 10:38
  • Sure, not all of it, but a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – Tholle Jul 06 '18 at 10:38
  • It's just like: normal ListItem component has grey ripple. If I wrap it into a NavLink component the ripple becomes red (and additionally there it gets a blue background on mouseUp) – Andreas Linden Jul 06 '18 at 10:40
  • Alright. I'm not sure how you are writing your CSS, but your could add [this CSS](https://stackoverflow.com/questions/37669391/how-to-get-rid-of-underline-for-link-component-of-react-router#answer-48874424) to them. – Tholle Jul 06 '18 at 10:44
  • i'm using Material-UI default JSS `withStyles()` – Andreas Linden Jul 06 '18 at 10:53
  • ok here is the code-sample: https://codesandbox.io/s/xrxl90jv04 – Andreas Linden Jul 06 '18 at 11:03
  • Thanks, interesting. It seems to get a purple ripple as soon as it's inside an anchor tag. Doesn't matter if you use `Link`, or even `a`. – Tholle Jul 06 '18 at 11:10
  • just found a good solution, check my answer haha – Andreas Linden Jul 06 '18 at 11:16

2 Answers2

5

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

Andreas Linden
  • 12,489
  • 7
  • 51
  • 67
0

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 component={RouterLink} to={to} disablePadding>
        <ListItemButton>
            <ListItemText primary={primary} />
        </ListItemButton>
    </LinkRouted>
  )
}
ItemNavbar.propTypes = {
    opt: PropTypes.object.isRequired
};
Alex Cuenca
  • 1
  • 1