Dynamically update CSS in Meteor with FlowRouter and React
Thought it would be nice to contribute back to the Meteor community a bit by putting some of my learnings on the web, since I’ve been using the Stackoverflow/Google method of Learning How To Code Good™ for a while now.
I was trying to figure out how to get Meteor to introduce CSS elements that were specific to specific routes; in particular, I’m using FlowRouter, and I’d like to be able set, for instance, a snazzy background image on my login page. I didn’t see a lot of clear guidance on this, but what I tried, and found that it worked well, was to use jQuery to modify the CSS before rendering using ReactLayout, a la:
This works for now. Naturally, this has the nasty effect of mixing code with CSS in a non-intuitive way. Ideally, I would load the CSS from disk in some sort of automagic way, based on the route name. But, this is a good start.