如何摆脱React路由器的链接组件的下划线?

我有以下几点:

enter image description here

我如何摆脱蓝色下划线? 代码如下:

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

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

358060 次浏览
小开

我看到你在使用内联样式。textDecoration: 'none'在child中使用，实际上它应该在<Link>中使用，如下所示:

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

<Link>实际上会返回一个标准的<a>标记，这就是为什么我们在那里应用了textDecoration规则。

我希望这对你们有帮助

小开

如果你正在使用styled-components，你可以这样做:

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' }}来删除下划线。你也可以在style块中添加更多的css，例如style=\{\{ textDecoration: 'none', color: 'white' }}。

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

/ / CSS

.navigation_bar > ul > li {
list-style: none;
display: inline;
margin: 2%;
}


.link {
text-decoration: none;
}

/ / JSX

 <div className="navigation_bar">
<ul key="nav">
<li>
<Link className="link" to="/">
Home
</Link>
</li>
</ul>
</div>
小开

为了扩展@Grgur的回答，如果你在检查器中查看，你会发现使用Link组件会给它们预设的颜色值color: -webkit-link。如果你不想让它看起来像一个默认的超链接，你需要覆盖这个textDecoration。

enter image description here

小开

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

a{
text-decoration: none;
}

防止下划线为所有<a>标签，这是这个问题的根本原因

小开

我认为在菜单项(和其他MaterialUI组件，如按钮)中使用react-router-dom链接的最好方法是在“组件”道具中传递链接

<Menu>
<MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
<MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>

你需要在“MenuItem”的“to”道具中传递路由路径(将传递给Link组件)。 这样你就不需要添加任何样式，因为它将使用MenuItem样式

小开

还有另一种方法可以正确地删除链接的样式。你必须给它textDecoration='inherit'和color='inherit'的样式，你可以把它们作为样式添加到链接标签，像这样:

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

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

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

然后是<Link className='text-link'>

小开

对我有用的是:

<Link to="/" style=\{\{boxShadow: "none"}}>
小开

为我工作，只需添加className="nav-link"和activeStyle\{\{textDecoration:'underline'}}

<NavLink className="nav-link" to="/" exact activeStyle=
\{\{textDecoration:'underline'}}>My Record</NavLink>
小开 
style=\{\{ backgroundImage: "none" }}

只有这对我有用

小开 
a:-webkit-any-link {
text-decoration: none;
color: inherit;
}
小开

看这里-> https://material-ui.com/guides/composition/#button。

这是官方的材质界面指南。也许它对你会像对我一样有用。

然而，在某些情况下，下划线仍然存在，您可能需要使用text-decoration: "none"。为了更简洁的方法，您可以从material-ui/core导入并使用makestyle。

import { makeStyles } from '@material-ui/core';


const useStyles = makeStyles(() => ({
menu-btn: {
textDecoration: 'none',
},
}));


const classes = useStyles();

然后将className属性设置为{classes。menu-btn}在JSX代码中。

小开 
<Link to="/page">
<Box sx=\{\{ display: 'inline-block' }}>
<PLink variant="primary">Page</PLink>
</Box>
</Link>

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

小开

如果有人正在寻找material-ui的Link组件。只需添加属性underline并将其设置为none

<Link underline="none">...</Link>

小开
我解决了一个问题，可能就像你的。我试着在firefox中检查元素。 我将向你展示一些结果:

  1. 这只是我检查过的元素。“Link"组件将被转换为"a"Tag和"to"道具将转换为&;href&;属性:

.

  1. 当我点击:hov和选项:hover，这里是结果:

.

如你所见:悬停有文字装饰:下划线。我只添加到我的css文件:

a:hover {
text-decoration: none;
}

问题就解决了。但我也在一些其他类(比如你:D)设置了text-decoration: none，这可能会产生一些效果(我猜)。

小开
你可以简单地在你的scss文件中使用这段代码; 这将删除不需要的颜色变化，

a:-webkit-any-link {
&:hover {
color: white;
}
}
小开

我有一个问题，链接元素将我的h4更改为“下划线”，设置文本装饰:“none”不起作用，我唯一的解决方案是使用按钮。

<Link to="/settings">
<button>Settings</button>
</Link>
小开

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

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

< p > { 你想要什么造型 } < / p >
小开 
<Link
to='/maxpain'
replace
style=\{\{
textDecoration: 'none'
}}
>
<LinkText>Click here!</LinkText>
</Link>

就这么简单!

小开

这很简单。只要在你的<Link>标记中添加这个style=\{\{ textDecoration: 'none' }}

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

只是

<Link
to={`$path`}
style=\{\{ borderBottom: "none" }}>
....
</Link>
小开

只需将此添加到您的css文件或样式中，以删除任何导致下划线的链接!

a:-webkit-any-link{text-decoration: none;}

小开

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

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

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

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

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

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

jsx:

<Link className="link">
test
</Link>

css:

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

在App.css中使用

小开

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

小开

<Link />标签在呈现时基本上是<a>标签，所以你可以只写

a { text-decoration: none; }

，它为我工作:) 祝你好运< / p >

小开

CSS解决方案也用于React

  1. 只在Link(React Router)标签中添加className/class。(最重要的部分!!在链接标签中添加ClassName，而不是其他标签。)
  2. 在css文件中添加text-decoration: none。

Nav.js

  <Link to="/" className="link" >
Get Started
</Link>

Nav.css

.link{
text-decoration: none;
}
小开

添加css样式

a:link {
text-decoration: none;
color: #cc850a;
}


a:visited {
text-decoration: none;
color: #cc850a;
}


a:hover {
text-decoration: none;
color: #47a1ad;
}


a:active {
text-decoration: none;
}

提交答案