我有以下几点:

如何去掉蓝色下划线? 代码如下:

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

MenuItem组件来自http://www.material-ui.com/#/components/menu


当前回答

我发现这个问题,在一般情况下,没有一个答案真正解决了这个问题(例如,如果元素不是一个菜单项)。我建议:

import {useHistory} from "react-router-dom";
const MyComp = () => {
  const history = useHistory();
  return <div>
    <AnyComponent onclick={()=>history.push('/path/u/want')}
  </div>
}

其他回答

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

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

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

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

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

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

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

现在是2023年,伪类得到了广泛的支持。因为菜单项呈现为<li>,我们可以这样定义一个css规则:

a:has(> li) {
  text-decoration: unset;
  color: unset;
}

这只修改具有<li>子元素的<a>元素。

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

 a {
  text-decoration: none !important;
  color: black !important; 
  font-size: 20px;
}

在App.css中使用