CODEWITHSUNDEEP
javascriptreactjsreact-routermaterial-ui
Andreas Linden
Andreas Linden

Reputation: 12721

React-Router NavLink changes ripple colors on Material-UI ListItem

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?

Upvotes: 3

Views: 2923

Answers (2)

Alex Cuenca
Alex Cuenca

Reputation: 1

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
};

Upvotes: 0

Andreas Linden
Andreas Linden

Reputation: 12721

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

Upvotes: 6

Related Questions