Heading components in React with Inline styling

help
1

I decided to use React with inline styling (using Radium from Formidable Labs) and it’s been going okay, however, I’ve hit a stumbling block when trying to come up with a decent solution to styling heading components (h1, h2, h3, etc.).

Take a look at this to see what I’ve come up with. I doesn’t feel right.

const headingsArray = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

const headingsStyles = {
	base: {
		textRendering: "optimizeLegibility",
		lineHeight: 1,
		marginTop: 0,
		color: "#222",
		fontFamily: Fonts.serif,
	},
	h1: {
		fontSize: "4rem",
		marginBottom: (4/LineHeight) + 'rem'
	},
	h2: {
		fontSize: "3.333rem",
		marginBottom: (3.333/LineHeight) + 'rem'
	},
	h3: {
		fontSize: "2.6667rem",
		marginBottom: (2.6667/LineHeight) + 'rem'
	},
	h4: {
		fontSize: "2rem",
		marginBottom: (2/LineHeight) + 'rem'
	},
	h5: {
		fontSize: "1.333rem",
		marginBottom: (1.333/LineHeight) + 'rem'
	}
}

Headings = {}

_.each(headingsArray, function(heading, index){
   Headings[heading] = React.createClass(Radium.wrap({
      render: function(){
         var styles = {
            base: headingsStyles.base
         }

         var Heading = heading;

         return (
           <Heading className={this.props.className}
             style={[
               headingsStyles[heading],
               styles.base,
               styles.base.color = this.props.color,
               styles.base.fontWeight = this.props.weight,
               styles.base.opacity = this.props.alpha,
               styles.base.textAlign = this.props.align
             ]}
           >
             {this.props.children}
           </Heading>
         )
      }
   }));
 });