Styling react navbar-CodePudding

I am using the react-site-nav package in a react application with typescript. I am having trouble styling the navbar. The default colour is black and I am not being able to change it. [link to navbar package] (https://www.npmjs.com/package/react-site-nav)

I have to style the 'Site Nav' element provided by the package.

<SiteNav>
        <ContentGroup title="About" height="200">
         Some text 1
        </ContentGroup>
        <ContentGroup title="Contact" height="200">
         Some text 2
        </ContentGroup>
</SiteNav>

I tried using inline styles like this <SiteNav style={{ backgroundColor: "transparent" }}> but it didn't work. I also tried making a CSS class and other techniques but none worked.

Any help would be appreciated to make the navbar transparent. Thanks!

CodePudding user response：

The library exposes a prop on SiteNav called background

<SiteNav background='transparent'>

Here is one of their examples on their github repo that includes setting a transparent background