Languages

React - how to remove underline from Link?

0 points
Asked by:
Dirask Community
6930

Is there any way to remove the underline from Link component in React?

My code:

import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';

const linkStyle = {
  margin: '2px',
  padding: '10px',
  border: '2px solid black',
  borderRadius: '8px',
  background: 'gray',
  width: '200px',
  fontSize: '15px',
  color: 'black',
  display: 'block',
};

const App = () => {
  return (
    <Router>
      <Link to="/login" style={linkStyle}>
        Go to the login site.
      </Link>
    </Router>
  );
};

export default App;

Result:

React - how to remove underline from Link?
React - how to remove underline from Link?
1 answer
0 points
Answered by:
Dirask Community
6930

Inside linkStyle use textDecoration style property.

Practical example:

const linkStyle = {
  margin: '2px',
  padding: '10px',
  border: '2px solid black',
  borderRadius: '8px',
  background: 'gray',
  width: '200px',
  fontSize: '15px',
  color: 'black',
  display: 'block',
  textDecoration: 'none' // <-------- use this
};
0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join