React DevTools: styling overrides global styles

[CompuIves]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
This is a very specific case - there are some styles leaking from react devtools, if you use it in your own application directly. Specifically these lines: https://github.com/facebook/react/blob/devtools-v4-merge/packages/react-devtools-shared/src/devtools/views/root.css#L174-L178.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

It's funny, I can give a real CodeSandbox editor now! You can see the styling on the editor elements here: https://codesandbox.io/s/new.

What is the expected behavior?

No leaking styles. Ideally the * { would be prefixed by an id or classname specific for the devtools. I think this should be possible with the styling used by the devtools. I can open a PR to fix this if everyone agrees on this fix.

cc @bvaughn

[bvaughn]

Ah, interesting. Sorry about that!

No leaking styles. Ideally the * { would be prefixed by an id or classname specific for the devtools. I think this should be possible with the styling used by the devtools.

I think think this might be trickier than that. I don't think that scoping to a style would effectively override the box sizing of element types nested within DevTools, which is pretty important for layout in some cases.

A PR would be welcome though! 😄

[GasimGasimzada]

I tried to create a simple sample to show if using class name and wildcard selector together works: https://codepen.io/gasim/pen/mdyqEdd.

Because wildcard is the last item to be applied within a style, I think nesting the styles within .DevTools + * is going to work (I will test it out tomorrow by building dev tools from the source). The only issue is if an element above the above DevTools component also has a similar selector (btw this is how CodeSandbox overrides React DevTools wildcard selector styles) :

<div className="some-container">
  <div className="DevTools">...</div>
</div>

.DevTools {
  box-sizing: border-box;
}

.some-container * {
  box-sizing: content-box;
}

Order matters here. If some container's CSS is loaded before .DevTools CSS, everything will be fine. Otherwise, the layout is going to break. However, without scoping the wildcard with a class name will fail anyways, regardless of the load order of selectors.

So, at the very least, scoping the wildcard selector with a class name is going to help prevent bleeding of elements. It is not a perfect solution but it is safer than using open wildcard selector. Here is an output of DevTools in CodeSandbox by playing with CSS in Browser's DevTools:

* {
 // React Dev Tools wildcard styles
 color: red;
}

// added it through the inspector
.DevTools * {
  color: yellow;
}

I don't think that scoping to a style would effectively override the box sizing of element types nested within DevTools

What do you mean by "elements types nested within DevTools"? Is there something that I am missing here? If it is okay, can I work on this and test it more thoroughly?

[bvaughn]

Hm! I don't remember what I meant by that comment I wrote a few months ago. Sorry 😄

Hm... I think this general approach would be okay:

.DevTools  * {
  box-sizing: content-box;
  // ...
}

This type of CSS rule is kind of slow though so it kind of sucks to have to use it for this.

We'd also need to move the box-sizing style from root.css into DevTools.css so the DevTools selector would work right with the CSS modules generated class names.

[GasimGasimzada]

I created a PR where I added the .DevTools, .DevTools * selectors to set DevTools' global properties. I added both selectors because otherwise, the DevTools container will be omitted when applying these styles.

Hm! I don't remember what I meant by that comment I wrote a few months ago. Sorry 😄

My bad! I have just started checking out reported bugs through the issues to see if there is something that I can fix. Forgot to check the dates 😄

[bvaughn]

Oops I think PR #17775 addressed this and I just forgot to close the issue.