Make all style-related props pass correctly to EuiSideNavItem

doesn't need a changelog as this is not a publicly exported component

src/components/side_nav/side_nav_item.test.tsx

@@ -7,12 +7,15 @@
  */
 
 import React from 'react';
-import { requiredProps } from '../../test/required_props';
 import { render } from '../../test/rtl';
+import { shouldRenderCustomStyles } from '../../test/internal';
+import { requiredProps } from '../../test/required_props';
 
 import { EuiSideNavItem } from './side_nav_item';
 
 describe('EuiSideNavItem', () => {
+  shouldRenderCustomStyles(<EuiSideNavItem>test</EuiSideNavItem>);
+
   test('is rendered', () => {
     const { container } = render(
       <EuiSideNavItem>

src/components/side_nav/side_nav_item.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, {
+  HTMLAttributes,
   ReactNode,
   ReactElement,
   MouseEventHandler,
@@ -75,6 +76,10 @@ export interface _EuiSideNavItemProps {
    * Passed to the actual `.euiSideNavItemButton` element
    */
   buttonClassName?: string;
+  /**
+   * className, css, and style are passed to the parent wrapper, not the button
+   */
+  style?: HTMLAttributes<HTMLDivElement>['style'];
   // Exposed as different prop type to consumer
   items?: ReactNode;
   // Not exposed to consumer
@@ -165,6 +170,8 @@ export const EuiSideNavItem = <
   renderItem: RenderItem = DefaultRenderItem,
   depth = 0,
   className,
+  css,
+  style,
   truncate = true,
   emphasize,
   buttonClassName,
@@ -210,6 +217,7 @@ export const EuiSideNavItem = <
     isTrunk && styles.trunk,
     isBranch && styles.branch,
     emphasize && styles.emphasized,
+    css,
   ];
   const itemsStyles = hasChildItems && [
     styles.items.euiSideNavItem__items,
@@ -241,7 +249,7 @@ export const EuiSideNavItem = <
   ];
 
   return (
-    <div css={cssStyles} className={classes}>
+    <div css={cssStyles} className={classes} style={style}>
       <RenderItem
         css={buttonCssStyles}
         className={buttonClasses}