我有以下几点:

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

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

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


当前回答

你可以在Link组件中添加style={{textDecoration: 'none'}}来删除下划线。你也可以在样式块中添加更多的css,例如style={{textDecoration: 'none', color: 'white'}}。

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1> 

其他回答

下划线默认来自react-router-dom包。您可以执行以下操作来修复此问题。

<Link to="/route-path" style={{ textDecoration: 'none' }}> 
    // Rest of the code
</Link>

你可以在Link组件中添加style={{textDecoration: 'none'}}来删除下划线。你也可以在样式块中添加更多的css,例如style={{textDecoration: 'none', color: 'white'}}。

<h1>
  <Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
    Get Started
  </Link>
</h1> 
<Link to="/page">
    <Box sx={{ display: 'inline-block' }}>
        <PLink variant="primary">Page</PLink>
    </Box>
</Link>

在某些情况下,当在Gatsby <Link>组件中使用另一个组件时,在内部组件周围添加带有display: 'inline-block'的div,可以防止下划线(在示例中为'Page')。

标准的a-link和react-link是一样的。

如果你要样式化a-link,它会自动样式化react-link。

一个{ 你想要什么造型 }

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