Struggling to modify the text color in my Navbar component within the Link tag of react-router-dom, but it's stubbornly refusing to change.
Utilizing styled components
Beneath is the complete code for 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;
`
The color: white; property added to the Nav element should alter the text color, yet no luck so far.
I've attempted adding styles in the ul and li elements without success.
Including the text-decoration property hasn't produced any changes either.
If anyone can advise on how to successfully modify the text color and other properties, I'd greatly appreciate it.