How do I apply Css only for certain routes and then unload the effects on other routes
ok
4 Replies
There is no unloading a css file. Once it's loaded the only way to unload it is to refresh the page.
Instead you should split the classes and apply them to the routes selectively
What you can do is also overwrite the older stylesheet with a new one but it's not the best approach
look there is a variable --main-max-width which is applied to top element, which changes value in different pages
you can't ever unload css, so you gotta define the css such that it's correct for all pages.
for example, make each page have a different class on the top level element, and set the variable in each class instead of on the root.
why would i go into that trouble, is this standard practice for single page apps. is there a guide principles where i can read onto
also how do i do that in tsx, like top level element is defined on top level layout each page is embedded inside a route, that can't access the top level