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

admin管理员组
文章数量:1023803

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?

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

Share Improve this question edited Jul 6, 2018 at 11:03 asked Jul 6, 2018 at 10:29 Andreas Linden 12.7k7 gold badges53 silver badges69 bronze badges

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

| Show 4 more ments

2 Answers 2

Sorted by: Reset to default 6

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

here is a minimal code-sample showing the problem:

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

Share Improve this question edited Jul 6, 2018 at 11:03 asked Jul 6, 2018 at 10:29 Andreas Linden 12.7k7 gold badges53 silver badges69 bronze badges

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

| Show 4 more ments

2 Answers 2

Sorted by: Reset to default 6

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

本文标签： javascriptReactRouter NavLink changes ripple colors on MaterialUI ListItemStack Overflow

版权声明：本文标题：javascript - React-Router NavLink changes ripple colors on Material-UI ListItem - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745602602a2158543.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - React-Router NavLink changes ripple colors on Material-UI ListItem - Stack Overflow

2 Answers 2

2 Answers 2

更多相关文章