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
- import Line from react-chartjs-2 from the wrong place
- using core.async / ajax data in om component
- Correct place to load data in connected redux component
- Unit tests fail with error "Cypress command timeout of '4000ms' exceeded."
- How to update atoms (state) in Recoil.js outside components ? (React)
- How to conditionally remove a value from a javascript object during a setState call in ReactJS?
- If any option from a Group is selected, then all options in other group should get disabled using Ant design (OptGroup, Option) - React.js
- How to solve issue with React updating state (using useState / setState) properly but no rerendering component?
- I am receiving an error when I run NPM start
- HTML Within Loop Not Rendering in React
- Unable to have npm run a script that starts testcafe
- How to move a React component using CSS ? No functions or classes are working
- Selecting second child div while hovering on first child div in makeStyles Material UI
- Loop through an elasticsearch object response in react
- How to use React Test Utilities with Jasmine
- Failed prop type while doing prop validation in React.js
- Redux Saga select is not a function
- How can i add custom text to react-datepicker?
- ReactJS: Which lifecycle method should I use to detect change in props?
- Add custom style inside DataGrid Toolbar's popup component Material-UI
- NextJS Deploy ModuleNotFoundError: Module not found
- MUI ClickAwayListener closing the modal itself when clicked (React.Js)
- How to display binary data as image in React?
- How to detect by word in an input ReactJS
- Unable to apply styles to styled-component element in Reactjs
- How can I highlight part of the text in material-ui TextField
- React - Call parent method from within child component
- firebase set not accepting nested dictionary
- Reactjs: document is not defined
- Logout Component: TypeError: Cannot read property 'props' of undefined