Since Radium styles are just Javascript objects, its very easy to maintain files that act as a source of truth for things like colors, etc. and import those into your stylesheets.
Here's a trivial example:
// example-stylesheet.js
import colors from './colors';
export default {
link: {
color: colors.blue
},
};
// colors.js
export default {
blue: 'rgb(66, 130, 226)'
}
// example-component.jsx
import React, { Component } from 'react';
import Radium from 'radium';
import style from './example-stylesheet';
class ExampleComponent extends Component {
render() {
return (
<a href="#" style={style.link}>Link Text</a>
);
}
}
export default Radium(ExampleComponent);
In this case, colors.js is a file in the same directory and project as example-component.jsx, but you could move it to a different folder (to make it easier for other components in the same project to consume it), or even to its own node module (with other similar common style rules) to make it easy for other apps to consume those same rules.