React Router imposes its own Navbar Styles. I can change the link styles but I am still left with borders and padding which I can't get rid of

I am using React Router, which works well enough. However, the NavBar which comes with the router has style elements that I ewant to override. I can change the link font and colour but I can't get rid of the borders or the padding, which means my navbar is too wide and too tall. If I look in chrome developer it seems there is a navbar style of "sc-hKgJUU caLaoV" which I cannot override.

This is what I see in Chrome developer tools

<ul class="sc-bdfBQB iGWAPe">
<a href="/"><li>Home</li></a>
<a href="/introduction">
<li>Introduction</li>
</a>
</ul>

How can I override this to reduce the padding etc ?