我有以下几点:
如何去掉蓝色下划线? 代码如下:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
MenuItem组件来自http://www.material-ui.com/#/components/menu
当前回答
如果你正在使用样式化组件，你可以这样做:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
const StyledLink = styled(Link)`
text-decoration: none;
&:focus, &:hover, &:visited, &:link, &:active {
text-decoration: none;
}
`;
export default (props) => <StyledLink {...props} />;
其他回答
你可以在Link组件中添加style={{textDecoration: 'none'}}来删除下划线。你也可以在样式块中添加更多的css，例如style={{textDecoration: 'none'， color: 'white'}}。
<h1>
<Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
Get Started
</Link>
</h1>
现在是2023年，伪类得到了广泛的支持。因为菜单项呈现为<li>，我们可以这样定义一个css规则:
a:has(> li) {
text-decoration: unset;
color: unset;
}
这只修改具有<li>子元素的<a>元素。
我有一个问题，链接元素将我的h4更改为“下划线”，设置文本装饰:“none”不起作用，我唯一的解决方案是使用按钮。
<Link to="/settings">
<button>Settings</button>
</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组件，在这种情况下，链接默认情况下没有文本修饰。
如果你正在使用样式化组件，你可以这样做:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
const StyledLink = styled(Link)`
text-decoration: none;
&:focus, &:hover, &:visited, &:link, &:active {
text-decoration: none;
}
`;
export default (props) => <StyledLink {...props} />;
