Material UI style specificity issues

Since we have multiple instances of material-ui each one of them injects styles into the head without awareness of what the others are injecting.

Each instance only injects the styles that are needed at that moment, so you can get into weird states like this: One instance of material-ui renders a MenuItem which uses both Button and MenuItem styles, so it injects Button styles first and MenuItem second so that the MenuItem styles override Button. but then the other instance of material-ui is only rendering a Button so it injects styles for Button and if that happens after MenuItem then you end up with Button > MenuItem > Button with Button incorrectly overriding MenuItem styles.

There’s a few possible fixes:

• Wrap all of JupyterLab inside of a StylesProvider component (the best solution, if possible)
• have a classname generator with disableGlobal set to true (This will make all the Mui style names non-deterministic, so we won’t be able to override styles via css, but I believe we can override them via a theme)
• create our own classname generator that allows us to create deterministic Mui classes, but with each mui instance prefixed with something custom

[kevin-bates]

If you run jupyter lab in a folder with git the dropdown will be broken. If you run jupyter lab in a normal non-git project folder the dropdown will render correctly

To clarify this, it’s really a function of where your notebook-dir is pointing relative to a git configuration. Since I always run lab with --notebook-dir=~/notebooks and git is not configured in ~/notebooks, I did not see this problem when when invoking jupyter lab from my elyra dev tree. However, based on this information, if I perform that same invocation, but do not add --notebook-dir=~/notebooks, the issue reproduces. Nice find @bourdakos1!

[bourdakos1]

I was able to make the original issue we were seeing reproducible. The issue is the git extension, it uses material-ui for tabs, but the tabs only render if you are in a git initialized folder. If you run jupyter lab in a folder with git the dropdown will be broken. If you run jupyter lab in a normal non-git project folder the dropdown will render correctly