我是 React 的新手，我创建了一个带有登录和仪表板页面的简单应用程序。我已成功配置了具有重定向功能的公共路由和私有路由。但是，当我想实现material-ui/core 时，事情仍然运行良好，但我无法实现我想要的UI。

这是我在下面的NavBar 的旧实现：

const Navigation = () => {
    return (
        <div>
            <NavLink exact to="/" activeStyle={{ color: 'red' }}>Home</NavLink>
            <NavLink to="/about" activeStyle={{ color: 'red' }}>About</NavLink>
            <NavLink to="/contact" activeStyle={{ color: 'red' }}>Contact</NavLink>
        </div>
    )
}

export default Navigation

就这么简单，没有样式或类

但是因为我想添加一些样式，所以我使用了material/ui 核心并最终做了下面的新样式：

export const MainNavigation = (
  <div>
    <ListItem button>
      <ListItemIcon>
        <DashboardIcon />
      </ListItemIcon>
      <ListItemText primary="Dashboard" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <ShoppingCartIcon />
      </ListItemIcon>
      <ListItemText primary="Orders" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <PeopleIcon />
      </ListItemIcon>
      <ListItemText primary="Customers" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <BarChartIcon />
      </ListItemIcon>
      <ListItemText primary="Reports" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <LayersIcon />
      </ListItemIcon>
      <ListItemText primary="Integrations" />
    </ListItem>
  </div>
);

现在第一个ListItem看起来像下面这样：

但是当我在下面添加这行代码时：

<ListItemText primary={<NavLink exact to="/">Dashboard</NavLink>} />

这是结果：

但我不希望这种情况发生。

我想保持第一UI我不wan't它，使其看起来像一个锚标记与下线以下

我怎样才能处理与react-router或集成的in material/ui的活动状态？这样我就可以放一些样式或使用活动类的材料。ListItemNavLinkLink

感谢有人可以提供帮助。提前致谢。