I am trying to change the color of the text in my Navbar component that is in the Link tag of react-router-dom but for some reason it is not changing

I am using styled components

Here is the entire code of my navbar component

import React from 'react'
import styled from 'styled-components';
import {Link} from 'react-router-dom'

const Navbar = () => {
  return (
    <>
    <Nav>
      <Title>
        PortFolio
      </Title>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/contact'>Contact</Link></li>
      </ul>
    </Nav>
    <div>

    </div>
    </>
  )
}

export default Navbar


const Nav = styled.div`
  height: 70px;
  width: 100%;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 30px;

  ul {
    display: flex;
    list-style: none;
    
    li {
      margin: 0 20px;
      font-size: 20px;
      text-decoration-color: red;
    }
  }

`
const Title = styled.span`
  font-size: 40px;
  font-family: 'Ubuntu', sans-serif; 

`

I have given the property of color: white; in the Nav tag of tag so it should change the color of the text but it is not changing

I also tried to add the style in the ul and li tags but no change

I tried to add the text-decoration property but no change

Can somebody tell me how do I change the color and other properties of the text.

CodePudding user response：

You can give the Link-Tag a style attribut:

const linkStyle = {
  margin: "1rem",
  textDecoration: "none",
  color: 'blue'
};

function Nav() {
  return (
    <NavUnlisted>
      <Link to="/" style={linkStyle}>
        Home
      </Link>
      <Link to="/about" style={linkStyle}>
        About
      </Link>
    </NavUnlisted>
  );
}

For more information go to: https://codesandbox.io/s/styling-react-router-linksstarter-template-tctnj?file=/src/Nav.js:253-460

https://dev.to/ridhikgovind/how-to-style-your-react-router-links-using-styled-components-2350