我有以下几点:
如何去掉蓝色下划线? 代码如下:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
MenuItem组件来自http://www.material-ui.com/#/components/menu
我有以下几点:
如何去掉蓝色下划线? 代码如下:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
MenuItem组件来自http://www.material-ui.com/#/components/menu
当前回答
材料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组件,在这种情况下,链接默认情况下没有文本修饰。
其他回答
我看到你在使用内联样式。textDecoration: 'none'在child中使用,实际上它应该在<Link>中使用,如下所示:
<Link to="first" style={{ textDecoration: 'none' }}>
<MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>
<Link>将返回一个标准的<a>标签,这就是为什么我们在这里应用textDecoration规则的原因。
a:-webkit-any-link {
text-decoration: none;
color: inherit;
}
为了扩展@Grgur的答案,如果你在检查器中查看,你会发现使用Link组件会给它们预设的颜色值color: -webkit-link。如果你不想让它看起来像一个默认的超链接,你需要覆盖这个textDecoration。
还有另一种方法可以正确地删除链接的样式。你必须给它的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>