SolidJS•7mo ago

Scope styles to a page

Heyo! I want to be able to scope some CSS to only apply when that page component is mounted. This CSS targets the html and body tags and is not for the component itself. Currently I am doing import "./layout.css";, which correctly applies the styles when on this page, but then the styles remain in effect when I navigate to other pages. I could use :has() but support isn't all the way there yet. I could utilize mount and cleanup, but not sure how I could "run" and dispose of the CSS because that's not how CSS works.

7 Replies

Parker Codes•7mo ago

I may just have to use JS to set these styles in the page lifetime functions.

Raqueebuddin Aziz•7mo ago

You cannot do remove css without doing a browser refresh, so instead you should just remove the classes on navigation to other pages

Parker Codes•7mo ago

This works easily enough! A little hacky for now until a better structure is in place.

onMount(() => {
  document.documentElement.classList.remove("x-layout");
});
onCleanup(() => {
  document.documentElement.classList.add("x-layout");
});

onMount(() => {
  document.documentElement.classList.remove("x-layout");
});
onCleanup(() => {
  document.documentElement.classList.add("x-layout");
});

lxsmnsyc•7mo ago

the parkour solution is to use solid-styled

Parker Codes•7mo ago

Hey, I like this! My use case is too narrow to pull in an extra dependency, but I'll keep this in mind for the future. Feels a lot more expressive, like Svelte and Vue style blocks.

lxsmnsyc•7mo ago

yeah which is why I called it a "parkour" solution

lxsmnsyc•7mo ago

https://tenor.com/view/michael-scott-flip-couch-parkour-the-office-gif-8710113

Tenor

parkour

Gaming

Programming

Scope styles to a page