我有以下几点:

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

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

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


当前回答

我只是加了两行,就为我工作了:)

{
 text-decoration: none; 
 color: black;
}

其他回答

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

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

核心方法在app。css(或对应版本)中

a{
  text-decoration: none;
}

这防止下划线为所有<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组件,在这种情况下,链接默认情况下没有文本修饰。

我只是加了两行,就为我工作了:)

{
 text-decoration: none; 
 color: black;
}
<Link 
   _hover={{
      textDecoration: "none"
   }}
   >
   Logo
</Link>