cssreactjsmaterial-uitanstack-router

How to remove CSS from @tanstack/react-router Link component?

I'm using the React MUI List component and the tanstack router Link component

<List>
    <Link to="/customers/$customerID" params={{ customerID: 123 }}>
        <ListItemButton>
            <ListItemText primary="Customer 123" />
        </ListItemButton>
    </Link>
</List>

The code works as expected but the Link component overwrites the CSS of the MUI ListItemText component.

Without the Link component the fake data is rendered like this

enter image description here

and with the Link component the fake data is rendered like this

enter image description here

Adding style={{ textDecoration: "none", textDecorationColor: "currentColor" }} to the Link component didn't fix it.

I created a small playground for reproduction. Do you know how to solve this?

Solution

  • you seem to giving css at wrong place just give css to </Link/> tag instead of </ListItemText/>

    style={{ textDecoration: 'none', color: 'inherit' }}

    Restructure your code like this

    <List>
  <Link
    to="/"
    style={{ textDecoration: 'none', color: 'inherit' }} // Inline style for Link
  >
    <ListItemButton>
      <ListItemText primary="Text" />
      <ListItemText primary="Text" />
    </ListItemButton>
  </Link>
</List>