How to get rid of underline for Link component of React Router

Question

How do I get rid of the blue underline? The code is below:

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

Any insight or guidance would be greatly appreciated. Thank you in advance.

Answer 1

Hello,

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} />;

Hope it helps!!

To know more about React, We highly recommend to join React training online today.

Thank You!!