[docs] Use minimum variant

Author: m4theushw

docs/src/pages/components/tree-view/GmailTreeView.js

@@ -24,9 +24,6 @@ const useTreeItemStyles = makeStyles((theme) => ({
       backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
       color: 'var(--tree-view-color)',
     },
-    '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {
-      backgroundColor: 'transparent',
-    },
   },
   content: {
     color: theme.palette.text.secondary,
@@ -93,6 +90,7 @@ function StyledTreeItem(props) {
         group: classes.group,
         label: classes.label,
       }}
+      variant="minimum"
       {...other}
     />
   );

docs/src/pages/components/tree-view/GmailTreeView.tsx

@@ -40,9 +40,6 @@ const useTreeItemStyles = makeStyles((theme: Theme) =>
         backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
         color: 'var(--tree-view-color)',
       },
-      '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {
-        backgroundColor: 'transparent',
-      },
     },
     content: {
       color: theme.palette.text.secondary,
@@ -110,6 +107,7 @@ function StyledTreeItem(props: StyledTreeItemProps) {
         group: classes.group,
         label: classes.label,
       }}
+      variant="minimum"
       {...other}
     />
   );

docs/src/pages/customization/default-theme/DefaultTheme.js

@@ -158,6 +158,7 @@ function ObjectEntry(props) {
       classes={{ root: classes.treeItem, content: classes.treeItemContent }}
       nodeId={nodeId}
       label={<ObjectEntryLabel objectKey={objectKey} objectValue={objectValue} />}
+      variant="minimum"
     >
       {children}
     </TreeItem>