Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[ListItemButton] Specifying href doesn't automatically rendered as <a>
See original GitHub issue- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
According to the MUI doc, LinkComponent (default to <a>) will be automatically used to render a link when the href is provided, without the need of manually setting component. Button and IconButton both inherit this behavior.
This is not the case for ListItemButton. It will not be rendered as LinkComponent when specifying href.
Expected Behavior 🤔
LinkComponent will be rendered as LinkComponent when specifying href, without specifying component="a"
Steps to Reproduce 🕹
Your Environment 🌎
`npx @mui/envinfo`
System:
OS: Windows 10 10.0.19043
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 23.81 GB / 31.73 GB
Binaries:
Node: 16.11.0 - C:\Program Files\nodejs\node.EXE
npm: 8.0.0 - C:\Program Files\nodejs\npm.CMD
Managers:
pip3: 21.2.3 - C:\Python310\Scripts\pip3.EXE
Utilities:
Git: 2.31.0.
IDEs:
VSCode: 1.61.0 - C:\Users\matth\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
Languages:
Python: 3.10.0
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (94.0.992.47)
Internet Explorer: 11.0.19041.1202
Issue Analytics
- State:
- Created 2 years ago
- Reactions:4
- Comments:5 (4 by maintainers)
Top Results From Across the Web
[ListItemButton] Specifying href doesn't automatically rendered ...
According to the MUI doc, LinkComponent (default to <a> ) will be automatically used to render a link when the href is provided,...
Read more >How to add a link to a List in material-ui 1.0? - Stack Overflow
Note that the href prop will be automatically passed to the anchor tag, as specified by the last line in the props documentation:....
Read more >ListItemButton API - Material UI - MUI
API reference docs for the React ListItemButton component. Learn about the props, CSS, and other APIs of this exported module.
Read more >[Solved]-How to add a link to a List in material-ui 1.0?-Reactjs
The behavior of the component prop is documented here. Note that the href prop will be automatically passed to the anchor tag, as...
Read more >How to use Next.js Links with Material-UI Button and ListElement
component="a": While a Button might automatically change to an a element when passed the href property, a <ListItem button> will not.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I had an issue with this today too, I’m currently specifying
component="a".Wasn’t sure if anything more really needed to be added to the existing PR (https://github.com/mui/material-ui/pull/29041) but if there is I’m happy to try to give it a go.
As far as I understand the ListItemButton should be rendered as a link if the href property is passed.
I’m trying to debug ~/packages/mui-joy/src/ListItemButton/ListItemButton.tsx and I don’t know how to do it.