Css variables affecting everything within the body

[igloo1505]

Description

When css is loaded by the Jupyter context component it effects everything downstream from the body element. I've played around with trying to forcefully overwrite it, but before I break other things in an attempt to fix this, is there a way to either manually import the css or to override those variables? The one for me in particular that's causing chaos is the --jp-ui-font-size variable that's being appended to everything from the body downwards. Even reassigning that variable with an !important flag fails to override it.

The app as a whole is built with the latest Next version, and Jupyter UI version ^0.7.14.

This is hands down the most poorly written thing I've ever posted on Github or StackOverflow, but any help would be appreciated. I don't know how to go into any more detail than this really.

Thanks!

Also, awesome package.

[echarles]

Hi @igloo1505 Thx a lot for reporting. I guess you are referring to those rules created by the JupyterLab CSS artifacts in the body. The way JupyterLab manages the CSS has been the source to me from a lot of pains. Let's brainstorm to find ways to workaround. I will also try to contact the JupyterLab community to raise that point but would not except a fast answer from the core.

[igloo1505]

Hey man,

Thanks for getting back to me. I have a little bit of an atypical build process going for this app that I'm working on, so I was able to find the culpurate and then I added this to the python build script.

build = Path("/Users/bigsexy/Desktop/notes/output/")
....some other stuff

f = open(build / "node_modules/@jupyterlab/ui-components/style/base.css", "r")

if f:
    content = f.read()
    content = content.replace(r"body {", "body.useJupyterStyles {")
    f.close()
    j = open(build / "node_modules/@jupyterlab/ui-components/style/base.css", "w")
    j.write(content)
    j.close()

I don't know how you guys would handle a single file in a dependency, but this approach worked. I added the styles that were in that body tag in the css file to the notebook container, but of course you could always replace that with something else that makes sense.

[echarles]

Thx for sharing this info. I started a discussion on https://github.com/jupyterlab/jupyterlab/issues/15320 and we may at least mitigate the issues in the upstream JupyterLab.

Another approach, similar to yours, is using a patch-package in the "postinstall" lifecycle . I haven't tried, but it should work.

[igloo1505]

Ah man that's awesome. I'm a creature of habit and despite doing this for close to ten years I never looked into all of the sorta hooks npm and yarn have. It never even crossed my mind. Thanks for that info! I have a pretty robust build script because the use case for this app isn't the typical build and deploy on a server somewhere sort of process, but your approach does make life easier for sure. That app is kinda right up Datalayer's alley if you guys are interested... really built for the academic world, both middle-high school students and Phds... I could really use a job lol.

[echarles]

Hi Andrey, yep, interested to learn more about what you are doing fo the academics. Any link to your site/code? How can we help?

[igloo1505]

Hi Andrey, yep, interested to learn more about what you are doing fo the academics. Any link to your site/code? How can we help?

Thanks for the reply and your interest. I just sent you an email with a bit of the backstory to this app, what it's intended to accomplish, and a link to a video demo. The nature of the app is such that a single production version isn't the goal, but the model coincides incredibly well with DataLayers platform and would offer a huge opportunity for expansion with the backstory providing a potential massive boost. The emails a bit long, but the backstory of this app is anything but typical.

Thanks again, Andrew