how to decurate react router link css

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

1import React, { Component } from 'react';
2import { Link } from 'react-router-dom';
3import styled from 'styled-components';
4
5
6const StyledLink = styled(Link)`
7    text-decoration: none;
8
9    &:focus, &:hover, &:visited, &:link, &:active {
10        text-decoration: none;
11    }
12`;
13
14export default (props) => <StyledLink {...props} />;

1#Nav_menu {
2  display: flex;
3  flex-direction: row;
4  width: 100%;
5  height: 100%;
6  list-style-type: none;
7  margin: 0;
8  padding: 0;
9}
10
11.Nav_link:link {
12  color: #fff;
13  font-size: 1.6rem;
14  line-height: 1.6rem;
15  text-decoration: none;
16}
17.Nav_link:visited {
18  color: #fff;
19}
20.Nav_link:hover {
21  color: yellow;
22}
23.Nav_link:active {
24  color: teal;
25}
26
27.activeRoute {
28  background-color: yellow;
29  border-bottom: 0.4rem solid teal;
30  cursor: not-allowed;
31}
32