Move the background style to the parent component (#43359)

public/app/core/components/NavBar/NavBarItem.tsx

@@ -123,7 +123,6 @@ const getStyles = (
 ) => ({
   ...getNavBarItemWithoutMenuStyles(theme, isActive),
   header: css`
-    background-color: ${theme.colors.background.secondary};
     color: ${theme.colors.text.primary};
     height: ${theme.components.sidemenu.width - (adjustHeightForBorder ? 2 : 1)}px;
     font-size: ${theme.typography.h4.fontSize};

public/app/core/components/NavBar/NavBarItemMenu.tsx

@@ -50,7 +50,13 @@ export function NavBarItemMenu(props: NavBarItemMenuProps): ReactElement | null
   const menuSubTitle = section.value.subTitle;
 
   const sectionComponent = (
-    <NavBarItemMenuItem key={section.key} item={section} state={state} onNavigate={onNavigate} />
+    <NavBarItemMenuItem
+      className={styles.section}
+      key={section.key}
+      item={section}
+      state={state}
+      onNavigate={onNavigate}
+    />
   );
 
   const subTitleComponent = (
@@ -124,5 +130,8 @@ function getStyles(
       padding: ${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)};
       white-space: nowrap;
     `,
+    section: css`
+      background-color: ${theme.colors.background.secondary};
+    `,
   };
 }

public/app/core/components/NavBar/NavBarItemMenuItem.tsx

@@ -7,16 +7,18 @@ import { useFocus } from '@react-aria/interactions';
 import { TreeState } from '@react-stately/tree';
 import { mergeProps } from '@react-aria/utils';
 import { Node } from '@react-types/shared';
+import classNames from 'classnames';
 
 import { useNavBarItemMenuContext } from './context';
 
 export interface NavBarItemMenuItemProps {
+  className?: string;
   item: Node<NavModelItem>;
   state: TreeState<NavModelItem>;
   onNavigate: (item: NavModelItem) => void;
 }
 
-export function NavBarItemMenuItem({ item, state, onNavigate }: NavBarItemMenuItemProps): ReactElement {
+export function NavBarItemMenuItem({ className, item, state, onNavigate }: NavBarItemMenuItemProps): ReactElement {
   const { onClose } = useNavBarItemMenuContext();
   const { key, rendered } = item;
   const ref = useRef<HTMLLIElement>(null);
@@ -46,7 +48,7 @@ export function NavBarItemMenuItem({ item, state, onNavigate }: NavBarItemMenuIt
   );
 
   return (
-    <li {...mergeProps(menuItemProps, focusProps)} ref={ref} className={styles.menuItem}>
+    <li {...mergeProps(menuItemProps, focusProps)} ref={ref} className={classNames(styles.menuItem, className)}>
       {rendered}
     </li>
   );