为我工作，只需添加className="nav-link"和activeStyle{{textDecoration:'下划线'}}

<NavLink className="nav-link" to="/" exact activeStyle= 
  {{textDecoration:'underline'}}>My Record</NavLink>

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

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

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

材料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组件，在这种情况下，链接默认情况下没有文本修饰。

你可以在你的scss文件中使用这段代码; 这将消除不需要的颜色变化，

a:-webkit-any-link {
  &:hover {
    color: white;
  }
}

<Link
   to='/maxpain'
   replace
   style={{
           textDecoration: 'none'
          }}
   >
     <LinkText>Click here!</LinkText>
</Link>

就这么简单!

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