feat(navigation): keep default style for child components (#259)

Author: ehsan-github

src/components/navigation/item/index.tsx

@@ -9,6 +9,7 @@ import React, {
   useMemo,
 } from 'react';
 import { useTheme } from '../../../theme/theme';
+import * as R from 'ramda';
 
 // Context
 import NavigationContext from '../context/navigation.context';
@@ -46,6 +47,7 @@ const NavigationItem: FC<NavigationItemProps> = (
     mainTooltipText = '',
     secondaryTooltipText = '',
     href,
+    sx,
     ...restProps
   } = props;
   const isOpen =
@@ -83,7 +85,7 @@ const NavigationItem: FC<NavigationItemProps> = (
     <Box
       tx={tx}
       variant={getVariant(disabled, isActiveItem)}
-      sx={styles}
+      sx={R.mergeDeepLeft(styles, sx ?? {}) as object}
       onClick={!disabled ? handleClick : undefined}
       className={key == 'oldui' ? 'oldui' : ''}
       {...restProps}

src/components/navigation/navigation.stories.tsx

@@ -133,6 +133,7 @@ export const TreeObject: Story<NavigationProps> = () => {
           title: 'Data',
           icon: <GetIcon icon={IconName.folder} />,
           id: '8',
+          sx: { color: 'red', backgroundColor: 'blue' },
         },
         {
           title: 'Activity',