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:

FlowRouter.route('/login', {
action() {
$('body').css({"background-image": "url(/images/sunny-field-vertical-background.jpg)",
"background-size": "cover",
"background-repeat": "no-repeat"})
ReactLayout.render(LoginLayout, {});
}
})

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.

Like what you read? Give Matt Gordon a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.