react-router, radium and server side rendering - Warning: react checksum was invalid - css

Question

When doing server side rendering with react-router and Radium I get the following warning that appears to come from Radium appending css prefixes on the client but not on the server.
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) 8.$=10"><div style="-webkit-transition:b
(server) 8.$=10"><div style="transition:backgroun
I tried to include radiumConfig within my server side rendering code, as shown below, but it doesn't appear to help. Do you have any suggestions?
match({ routes, location }, (error, redirectLocation, renderProps) => {
if (redirectLocation)
res.redirect(301, redirectLocation.pathname + redirectLocation.search)
else if (error)
res.status(500).send(error.message)
else if (renderProps == null)
res.status(404).send('Not found')
else
content = ReactDomServer.renderToString(<RoutingContext {...renderProps} radiumConfig={{userAgent: req.headers['user-agent']}} />);
markup = Iso.render(content, alt.flush());
});
And my routes look like the following, where the App component is wrapped by Radium:
export default (
<Route path="/" component={App}>
<Route path="login" component={Login} />
<Route path="logout" component={Logout} />
<Route name="test" path="test" component={Test} />
<Route name="import" path="import" component={ImportPlaylist} />
<Route name="player" path="/:playlist" component={Player} />
</Route>
);

Answer 1

Here is a working solution. I needed to create a Wrapper component as suggested by #joshparolin on Github.
Wrapper.jsx:
import React from 'react';
import Radium from 'radium';
#Radium
export default class Wrapper extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
};
Server.jsx:
content = ReactDomServer.renderToString(<Wrapper radiumConfig={{userAgent: req.headers['user-agent']}}><RoutingContext {...renderProps} /></Wrapper>);
markup = Iso.render(content, alt.flush());
Client.jsx:
Iso.bootstrap((state, _, container) => {
alt.bootstrap(state);
ReactDOM.render(<Wrapper><Router history={createBrowserHistory()} children={routes} /></Wrapper>, container);
});