Radium or other uses of inline styling in React has its benefits of keeping components deprecated but how are design specs best kept across project? What happens when an accent color, border, or other design-wide change is made?
I recommend reading the answer by @jasonnutter . Also check out rest of the answers in that discussion.
Jason Nutter
Senior Front End Engineer @ Porch.com
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.jsis a file in the same directory and project asexample-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.