Does anyone know why the text decoration is not working on my link when I use text-decoration none? Any solutions or suggestions would be greatly appreciated. Thank you in advance! Navbar.js file

import React,{useState} from "react";
import { makeStyles } from "@material-ui/core/styles";
import {AppBar, Toolbar, Tab, Tabs, IconButton, Menu, MenuItem, useMediaQuery, useTheme, Button} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";

import { Link } from "react-router-dom";

import {navlinks} from './navbarlinks';
import {FaFacebook} from 'react-icons/fa';
import {FaInstagram} from 'react-icons/fa';
import {FaLinkedinIn} from 'react-icons/fa';
import {FaTwitter} from 'react-icons/fa';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1
  },
  menuButton: {
    marginRight: theme.spacing(2)
  },
  tab : {
    color : '#000000',
    'textDecoration': 'none'       
  },
  appBarTransparent: {
    backgroundColor: 'rgba(255,255,255,0.1);'
  },
  appBarSolid:{

  }
}));

const Navbar = () => {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [anchorE2, setAnchorE2] = React.useState(null);
  const open = Boolean(anchorEl);  

  const [value,setValue] = useState(0);

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleOpenMenu = e => {
    setAnchorE2(e.currentTarget);
  }

  const handleMenuClose = e => {
    setAnchorE2(null);
  }

  const handleClose = () => {
    setAnchorEl(null);
  };

  function a11yProps(index) {
    return {
      id: `simple-tab-${index}`,
      'aria-controls': `simple-tabpanel-${index}`,
    };
  }

  const handleClickTab = (e, newValue) => {
    setValue(newValue);
  }

  const theme = useTheme();

  const isMatch = useMediaQuery(theme.breakpoints.down('sm') );  

  return (
    <div>
      <AppBar position="sticky" className={classes.appBarTransparent}>
        <Toolbar>
          <Link to='/'><img src="/images/image2vector.svg" alt='logo' style={{'border-radius' : '33%', 'maxHeight' : 'auto', 'maxWidth':'112px'}}/></Link>
          { !isMatch ? 
                    <div className={classes.root}>
                        <Tabs   onChange={handleClickTab} indicatorColor='secondary' value={value} aria-label="icon tabs example">
                            {
                                navlinks.map( link => {
                                return <Link to={link.to}><Tab className={classes.tab} style={{'textDecoration': 'none'}}label={link.title} {...a11yProps(link.id)} /></Link>
                                })                                              
                            }                                                       
                        </Tabs>                         
                    </div> 
                    : 
                    <div className={classes.root}>
                        <IconButton
                          aria-label="account of current user"
                          aria-controls="menu-appbar"
                          aria-haspopup="true"
                          onClick={handleMenu}
                          color="inherit"
                        >
                          <MenuIcon />
                        </IconButton>
                        <Menu
                          id="menu-appbar"
                          anchorEl={anchorEl}
                          anchorOrigin={{
                            vertical: "top",
                            horizontal: "right"
                          }}
                          keepMounted
                          transformOrigin={{
                            vertical: "top",
                            horizontal: "right"
                          }}
                          open={open}
                          onClose={handleClose}
                          disableRipple
                        >
                            { navlinks.map(link => {
                                return <MenuItem onClick={handleClose}><Link to={link.to}>{link.title}</Link></MenuItem>
                                })
                            }              
                        </Menu>
                          
                    </div>                                                                         
            }
            <div>
              <Button               
                color="secondary" 
                onClick={handleOpenMenu}
                aria-controls='menu'
              >
                Contact Us
              </Button>
            </div>
            <Menu
              id='menu'
              anchorE2={anchorE2}
              open={Boolean(anchorE2)}
              onClose={handleMenuClose}
              anchorOrigin={{
                vertical: "bottom",
                horizontal: "right"
              }}
              keepMounted
              transformOrigin={{
                vertical: "top",
                horizontal: "center"
              }}
            > <MenuItem>+91 9426231824</MenuItem>             
              <MenuItem><FaFacebook /></MenuItem>
              <MenuItem><FaInstagram /></MenuItem>
              <MenuItem><FaLinkedinIn /></MenuItem>
              <MenuItem><FaTwitter /></MenuItem>              
            </Menu>
        </Toolbar>
      </AppBar>
    </div>
  );
};
export default Navbar;

navbarlink.js

export const navlinks = [
    {
        title: 'Home',
        to : '/',
        id:0
    },
    {
        title: 'About US',
        to : '/aboutus',
        id:1
    },
    {
        title: 'Projects',
        to : '/projects',
        id:2
    },
    {
        title: 'Services',
        to : '/services',
        id:3
    },
    {
        title: 'Get A Quote',
        to : '/contactus',
        id:4
    }
]

Why is text-decorating none not applied to my links in the app? Any insights are welcome, thank you in advance!