attempt to simplify selectors

mui · Feb 20, 2020 · fb2e75b · fb2e75b
1 parent aabf1d6
commit fb2e75b
Showing 1 changed file with 25 additions and 17 deletions.
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -16,22 +16,6 @@ export const styles = theme => ({
     padding: 0,
     outline: 0,
     WebkitTapHighlightColor: 'transparent',
-    '&:focus > $content $label': {
-      backgroundColor: theme.palette.action.hover,
-    },
-    '&$selected > $content $label': {
-      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-    },
-    '&$selected > $content $label:hover, &$selected:focus > $content $label': {
-      backgroundColor: fade(
-        theme.palette.primary.main,
-        theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
-      ),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    },
   },
   /* Pseudo-class applied to the root element when expanded. */
   expanded: {},
@@ -74,6 +58,24 @@ export const styles = theme => ({
       },
     },
   },
+  /* Styles applied to the label when node selected. */
+  selectedLabel: {
+    backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    '&:hover, &$focusedLabel': {
+      backgroundColor: fade(
+        theme.palette.primary.main,
+        theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+      ),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+  /* Styles applied to label when node focused. */
+  focusedLabel: {
+    backgroundColor: theme.palette.action.hover,
+  },
 });
 
 const isPrintableCharacter = str => {
@@ -389,7 +391,13 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
         ref={contentRef}
       >
         <div className={classes.iconContainer}>{icon}</div>
-        <Typography component="div" className={classes.label}>
+        <Typography
+          component="div"
+          className={clsx(classes.label, {
+            [classes.selectedLabel]: selected,
+            [classes.focusedLabel]: focused,
+          })}
+        >
           {label}
         </Typography>
       </div>