score:-2
What worked for me is this:
<Link to="/" style={{boxShadow: "none"}}>
score:-2
Just add this to your css file or styles to remove any link causing underline!
a:-webkit-any-link{text-decoration: none;}
score:-1
<Link
_hover={{
textDecoration: "none"
}}
>
Logo
</Link>
score:0
<Link to="/page">
<Box sx={{ display: 'inline-block' }}>
<PLink variant="primary">Page</PLink>
</Box>
</Link>
In some cases when using another component inside the Gatsby <Link>
component, adding a div
with display: 'inline-block'
around the inner component, prevents underlining (of 'Page' in the example).
score:0
Well you can simply use this piece of code in your scss file; This will remove that unwanted color change,
a:-webkit-any-link {
&:hover {
color: white;
}
}
score:0
I had a problem where the Link element was changing my h4 to 'underline', setting text-decoration: 'none' did not work, my only solution was to use a button instead.
<Link to="/settings">
<button>Settings</button>
</Link>
score:0
standard a-link and react-link are the same.
so if you are styling a-link, it will automatically style react-link.
a{ what ever styling you want }
score:0
Just
<Link
to={`$path`}
style={{ borderBottom: "none" }}>
....
</Link>
score:0
I find this question and no one of the answers really resolve the problem at all in a general case (e.g. if the elements isn't a MenuItem). I suggest:
import {useHistory} from "react-router-dom";
const MyComp = () => {
const history = useHistory();
return <div>
<AnyComponent onclick={()=>history.push('/path/u/want')}
</div>
}
score:0
I just added two lines and worked for me :)
{
text-decoration: none;
color: black;
}
score:0
a {
text-decoration: none !important;
color: black !important;
font-size: 20px;
}
used !important in App.css
score:1
To expand on @Grgur's answer, if you look in your inspector, you'll find that using Link
components gives them the preset color value color: -webkit-link
. You'll need to override this along with the textDecoration
if you don't want it to look like a default hyperlink.
score:1
style={{ backgroundImage: "none" }}
Only this worked for me
score:1
I have resolve a problem maybe like your. I tried to inspect element in firefox. I will show you some results:
- It is only the element I have inspect. The "Link" component will be convert to "a" tag, and "to" props will be convert to the "href" property:
- And when I tick in :hov and option :hover and here is result:
As you see a:hover have text-decoration: underline. I only add to my css file:
a:hover {
text-decoration: none;
}
and problem is resolved. But I also set text-decoration: none in some another classes (like you :D), that may be make some effects (I guess).
score:1
<Link
to='/maxpain'
replace
style={{
textDecoration: 'none'
}}
>
<LinkText>Click here!</LinkText>
</Link>
Simple as that!
score:1
the <Link />
tag basically is <a>
tag on render time, so you can just write
a { text-decoration: none; }
and it worked for me :) Good luck
score:2
jsx:
<Link className="link">
test
</Link>
css:
.link{
text-decoration: none;
}
score:2
Material UI v5+
You should be able to globally customize MUI component styles, such as:
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
However, more often than not, you should actually be using the Link component from react-router-dom
, in which case links would have no text decoration by default.
score:3
Working for me, just add className="nav-link"
and activeStyle{{textDecoration:'underline'}}
<NavLink className="nav-link" to="/" exact activeStyle=
{{textDecoration:'underline'}}>My Record</NavLink>
score:3
Look here -> https://material-ui.com/guides/composition/#button.
This is the official material-ui guide. Maybe it'll be useful to you as it was for me.
However, in some cases, underline persists and you may want to use text-decoration: "none" for that. For a more cleaner approach, you can import and use makeStyles from material-ui/core.
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles(() => ({
menu-btn: {
textDecoration: 'none',
},
}));
const classes = useStyles();
And then set className attribute to {classes.menu-btn} in your JSX code.
score:5
Its pretty simple. Just add this style={{ textDecoration: 'none' }}
inside of your <Link>
tag
<Link to="first" style={{ textDecoration: 'none' }}>
<MenuItem style={{ paddingLeft: 13 }}>
Team 1
</MenuItem>
score:5
The underline comes by default from the react-router-dom
package. You can do the following to fix the issue.
<Link to="/route-path" style={{ textDecoration: 'none' }}>
// Rest of the code
</Link>
score:7
//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>
score:9
There is the nuclear approach which is in your App.css (or counterpart)
a{
text-decoration: none;
}
which prevents underline for all <a>
tags which is the root cause of this problem
score:9
If someone is looking for material-ui
's Link component. Just add the property underline
and set it to none
<Link underline="none">...</Link>
score:15
a:-webkit-any-link {
text-decoration: none;
color: inherit;
}
score:16
You can add style={{ textDecoration: 'none' }}
in your Link
component to remove the underline. You can also add more css
in the style
block e.g. style={{ textDecoration: 'none', color: 'white' }}
.
<h1>
<Link style={{ textDecoration: 'none', color: 'white' }} to="/getting-started">
Get Started
</Link>
</h1>
score:73
There's also another way to properly remove the styling of the link. You have to give it style of textDecoration='inherit'
and color='inherit'
you can either add those as styling to the link tag like:
<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>
or to make it more general just create a css class like:
.text-link {
color: inherit;
text-decoration: inherit;
}
And then just <Link className='text-link'>
score:95
If you are using styled-components
, you could do something like this:
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} />;
score:143
I think the best way to use react-router-dom Link in a MenuItem (and other MaterialUI component such as buttons) is to pass the Link in the "component" prop
<Menu>
<MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
<MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>
you need to pass the route path in the 'to' prop of the "MenuItem" (which will be passed down to the Link component). In this way you don't need to add any style as it will use the MenuItem style
score:304
I see you're using inline styles. textDecoration: 'none'
is used in child, where in fact it should be used inside <Link>
as such:
<Link to="first" style={{ textDecoration: 'none' }}>
<MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>
<Link>
will essentially return a standard <a>
tag, which is why we apply textDecoration
rule there.
I hope that helps
Source: stackoverflow.com
Related Query
- How to get rid of underline for Link component of React Router?
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How to delay the redirect of a React Router Link component for 1 second?
- How to get rid of styling when using Link Component in React
- How to get params in component in react router dom v4?
- How to get code completion for typed react component properties?
- How to add dynamic code inside of a React Router Link component
- React : How to stop re-rendering component or making an API calls on router change for the same route
- How to make React component wait for redux store variables to get set?
- how to fetch a nested resource for every component in React router dom route
- How can I get a component to render as a parent of protected routes in react router dom?
- how to get const MyContext = React.createContext(); for other component in React js
- How to set active only one link with react router for multiple url state?
- How to implement transition effect for displaying underline on hovering a react router Link?
- How to link to Routes inside the component rendered by another Route with React Router
- How do I filter a list of data by id for my react component to get the name of the object
- How to pass a prop from one component to another when using react router link
- React Router Link is not working. The Route changes but the component doesn't get rendered
- How to use React Router Link component inside an Ant Design Tab component
- How can I pass props from one component to another using Link and router in react
- how to get route param values of child component from parent component in app using React Router
- How to toggle using redux in react for a nested link component within a mobile menu
- React router how to get current path and look for its updates
- React router v6 how to get current route in class component
- How to pass prop to react router component via NavDropdown.Item link
- How can I get a test to wait for an async React component to render before trying an assertion?
- How can I pass values from a functional component through a React Router Link to another functional component?
- React Router v4 - How to get current route?
- Multiple path names for a same component in React Router
- How to test style for a React component attribute with Enzyme
More Query from same tag
- Way to iterate with different grid sizes
- JavaScript LocaleDateString back to Date Object
- React onClick component execute function
- how to pass props using NAVLINK?
- dispatch() method in class-based components
- React passing props into custom carousel
- How to import image conditionally
- Transition works in one direction only
- React State Fields with Array of Objects
- How to import from different bundle created with webpack
- How to group objects with the same value into a bigger object?
- add or remove class when the window size is changed in react js
- immutable js update deep structure
- ReactJs : How to prevent componentWillUpdate from re-rendering multiple times
- Is it possible to place Cypress tests in existing React file architecture
- Is passing the "this" context through props an anti-pattern?
- How to add a loop resultat to a component in React?
- Getting error TypeError: Cannot read property 'id' of undefined using React/Redux action
- React - Passing a new value to an input field from an output component with an onClick
- Redirect if match.params doesn't match ID in DB | React Router V4
- displaying array in component populated by Axios get request
- Can't get Redux (Thunks) to work with NextJS using next-redux-wrapper: getInitalProps not called
- Is aws-amplify with auth broken?
- Apollo Client version 3 cache update delay
- Why my components don't display on my React page?
- TypeError: Cannot destructure property 'product' of 'productDetails' as it is undefined
- Clock is not ticking with sample time input (without getting system time)
- How to render two react list groups in the same container, chronologically
- Why does importing a class make this code fail?
- React component as backgroundImage