我正在尝试更改react-router-dom的Link标记中的Navbar组件中的文本颜色，但由于某种原因，它没有更改
我正在使用样式化组件
下面是我的导航栏组件的完整代码

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; 

`

我给出了颜色的性质：标记的Nav标记中的white;，因此它应该更改文本的颜色，但它没有更改
我还尝试在ul和li标记中添加样式，但没有更改
我尝试添加text-decoration属性，但没有更改
有人能告诉我如何改变文本的颜色和其他属性吗？