还有另一种方法可以正确地删除链接的样式。你必须给它的textDecoration='inherit'和color='inherit'的风格，你可以添加这些作为样式的链接标签，如:

<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>

或者为了使它更通用，只需创建一个CSS类:

.text-link {
    color: inherit;
    text-decoration: inherit;
}

然后只需<Link className='text-link'>

我认为在菜单项(和其他MaterialUI组件，如按钮)中使用react-router-dom链接的最好方法是在“组件”道具中传递链接

<Menu>
   <MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
   <MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>

你需要在“MenuItem”的“to”道具中传递路由路径(它将被传递给Link组件)。 这样你就不需要添加任何样式，因为它将使用MenuItem样式

材料UI v5+

你应该能够全局定制MUI组件样式，比如:

import { createTheme } from '@mui/material'

const theme = createTheme({
  components: {
    MuiLink: {
      styleOverrides: {
        root: {
          textDecoration: 'none',
        },
      },
    },
  },
})

const App = ({ currentAccount, neighborhoodsWithPropertyCount }) => (
  <ThemeProvider theme={theme}>
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  </ThemeProvider>
)

export default App

然而，通常情况下，实际上应该使用react-router-dom中的Link组件，在这种情况下，链接默认情况下没有文本修饰。

jsx:

<Link className="link">
  test
</Link>

css:

.link{
    text-decoration: none;
}

a:-webkit-any-link {
  text-decoration: none;
  color: inherit;
}

我看到你在使用内联样式。textDecoration: 'none'在child中使用，实际上它应该在<Link>中使用，如下所示:

<Link to="first" style={{ textDecoration: 'none' }}>
  <MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>

<Link>将返回一个标准的<a>标签，这就是为什么我们在这里应用textDecoration规则的原因。