[feature request] support styling Route element of 'react-router'

It has been a bit tricky to apply global style with styled-components, and I don’t want to use css-loaders just for several lines of global css code, and ideally position I found to inject the global style is at the Router object of react-router, which works well with redux connect function at the moment, but doesn’t seem to respond to styled. Would it be possible to make it work here?

[epilande]

@zhenyulin in https://github.com/styled-components/styled-components/issues/958#issuecomment-312240894, I think injectGlobal isn’t working because you need to add a selector.

Something like this should work.

injectGlobal`
+  body {
     color: green;
+  }
`;

Also you should be able to use your theme in injectGlobal. Assuming your theme is a javascript object, you can import it through out your app and use it just like any object.

This is how my global.js looks like, then I import it in my app’s main entry point.

import { injectGlobal } from 'styled-components';
import fonts from './fonts';
import theme from './theme';

injectGlobal`
  html {
    background: ${theme.lightBackgroundColor};
  }

  body {
    font-family: ${theme.baseFont};
    color: ${theme.textColor};
  }

  ${fonts}
`;

[k15a]

In theory, we could add this of course but I don’t think we should because we already have the tools to inject globals styles and it’s pretty easy so we shouldn’t add any more complexity.