Updated OwnersStack CSS to properly override React styles
Brian Vaughn committed
Apr 9, 2019 at 08:30 UTC
db629fa0734b51ff96bb31faf4edc11a9addedb7
2 files changed
+12
-9
src/devtools/views/Components/OwnersStack.css
+11
-4
@@ -6,6 +6,7 @@
6
}
7
8
.Component,
9
+.Component[data-reach-menu-item],
10
.SelectedComponent {
11
padding: 0.25rem;
12
margin-right: 0.5rem;
@@ -18,19 +19,25 @@
19
cursor: pointer;
20
text-align: left;
21
}
21
-.Component[data-selected],
22
-.Component:hover {
22
+
23
+.Component:hover,
24
+.Component[data-reach-menu-item]:hover {
25
background-color: var(--color-hover-background);
26
}
25
-.Component:focus {
27
+.Component:focus,
28
+.Component[data-reach-menu-item]:focus {
29
outline: none;
30
background-color: var(--color-hover-background);
31
}
32
30
-.SelectedComponent {
33
+.Component[data-reach-menu-item][data-selected],
34
+.Component[data-reach-menu-item][data-selected]:hover,
35
+.SelectedComponent,
36
+.SelectedComponent:hover {
37
background-color: var(--color-selected-background);
38
color: var(--color-selected-foreground);
39
}
40
+.Component[data-reach-menu-item][data-selected]:focus,
41
.SelectedComponent:focus {
42
outline: none;
43
}
src/devtools/views/Components/OwnersStack.js
+1
-5
@@ -100,11 +100,7 @@ function ElementsDropdown({
100
{ownerStack.map((id, index) => (
101
<MenuItem
102
key={id}
103
- className={
104
- ownerStackIndex === index
105
- ? styles.SelectedComponent
106
- : styles.Component
107
- }
103
+ className={styles.Component}
104
onSelect={() => selectOwner(id)}
105
>
106
{((store.getElementByID(id): any): Element).displayName}