0

I am using mui lists to create a sidebar.

 <List>
          <StyledLink to="/">
            <ListItem disablePadding>
              <ListItemButton>
                <ListItemIcon>
                  <GridView />
                </ListItemIcon>
                <ListItemText primary="Dashboard" />
              </ListItemButton>
            </ListItem>
          </StyledLink>
 </List>

I tried creating a custom Link like below,

import { Link } from "react-router-dom";

const StyledLink = ({ to, style = {}, children }) => (
  <Link to={to} style={{ ...style, textDecoration: "none" }}>
    {children}
  </Link>
);

export default StyledLink;

I also tried this solution.

But still the blue color doesn't go away and it doesn't inherit mui list item text formatting.

confusedWarrior
  • 938
  • 2
  • 14
  • 30

1 Answers1

1

text-decoration: "none" is only removing the underline style. You can get rid of the blue color by setting color attribute.

style={{ ...style, textDecoration: "none", color: "inherit" }}
froston
  • 1,027
  • 1
  • 12
  • 24