From db629fa0734b51ff96bb31faf4edc11a9addedb7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Apr 2019 08:30:24 -0700
Subject: [PATCH] Updated OwnersStack CSS to properly override React styles

---
 src/devtools/views/Components/OwnersStack.css | 15 +++++++++++----
 src/devtools/views/Components/OwnersStack.js  |  6 +-----
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css
index 9ea1641bdd..cf657f2757 100644
--- a/src/devtools/views/Components/OwnersStack.css
+++ b/src/devtools/views/Components/OwnersStack.css
@@ -6,6 +6,7 @@
 }
 
 .Component,
+.Component[data-reach-menu-item],
 .SelectedComponent {
   padding: 0.25rem;
   margin-right: 0.5rem;
@@ -18,19 +19,25 @@
   cursor: pointer;
   text-align: left;
 }
-.Component[data-selected],
-.Component:hover {
+
+.Component:hover,
+.Component[data-reach-menu-item]:hover {
   background-color: var(--color-hover-background);
 }
-.Component:focus {
+.Component:focus,
+.Component[data-reach-menu-item]:focus {
   outline: none;
   background-color: var(--color-hover-background);
 }
 
-.SelectedComponent {
+.Component[data-reach-menu-item][data-selected],
+.Component[data-reach-menu-item][data-selected]:hover,
+.SelectedComponent,
+.SelectedComponent:hover {
   background-color: var(--color-selected-background);
   color: var(--color-selected-foreground);
 }
+.Component[data-reach-menu-item][data-selected]:focus,
 .SelectedComponent:focus {
   outline: none;
 }
diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js
index e459e1eee4..983d8e502a 100644
--- a/src/devtools/views/Components/OwnersStack.js
+++ b/src/devtools/views/Components/OwnersStack.js
@@ -100,11 +100,7 @@ function ElementsDropdown({
         {ownerStack.map((id, index) => (
           <MenuItem
             key={id}
-            className={
-              ownerStackIndex === index
-                ? styles.SelectedComponent
-                : styles.Component
-            }
+            className={styles.Component}
             onSelect={() => selectOwner(id)}
           >
             {((store.getElementByID(id): any): Element).displayName}