I am struggling to change the background color of the navbar in my PrimeReact application. I have tried adding CSS styling in various places, but nothing seems to work. All I want is to customize the background color while keeping the default PrimeReact styling intact.
import React from 'react';
import { Menubar } from 'primereact/menubar';
import { MenuItem } from 'primereact/menuitem';
import { Badge } from 'primereact/badge';
import 'primereact/resources/themes/saga-blue/theme.css'; // Theme
import 'primereact/resources/primereact.min.css'; // Core
import 'primeicons/primeicons.css'; // Icons
import logo from './assets/logo.png';
export default function Testpages() {
const itemRenderer = (item) => (
<a>
<span className={item.icon} />
<span className="mx-2">{item.label}</span>
{item.badge && <Badge className="ml-auto" value={item.badge} />}
{item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
</a>
);
const items: MenuItem[] = [
{
label: 'Home',
icon: 'pi pi-home'
},
{
label: 'Features',
icon: 'pi pi-star'
},
{
label: 'Projects',
icon: 'pi pi-search',
},
{
label: 'Contact',
icon: 'pi pi-envelope',
}
];
return (
<div className="w-full ">
<div className="container mx-auto">
<div className="logo-container flex justify-center py-4">
<img src={logo} alt="Logo" className="logo-image" />
</div>
</div>
<div>
<Menubar model={items} />
</div>
</div>
)
}