Generating inline font-size style using ReactJS

Question

I am trying to do something like this in ReactJS:

var MyReactClass = React.createClass({     render: function() {         var myDivText = "Hello!";         var myFontSize = 6; //this is actually something more complicated, I'm calculating it on the fly         var divStyle = {             font-size: {fontSize + 'px !important;'},         };         return (<div style={divStyle}>{myDivText}</div>);    } }); 

The problem is that I get this error when I run my code: "Module build failed: Error: Parse Error: Line 5: Unexpected token -" apparently, React doesn't like that font-size has a dash in it. How do I get around this? Is there some way to escape that character for react? Is there some different css property that react likes better that does the same thing?

Thanks!

Answer 1

Use fontSize instead of font-size

the solution is to camelCase properties which usually contain a dash

http://facebook.github.io/react/tips/inline-styles.html

Answered my own question :)

Answer 2

As https://reactjs.org/docs/dom-elements.html says,
We need to remove '-' and upperCase except first word

Example-
background-color as backgroundColor,

Same will be applicable everywhere except a few as-

aria-* and data-* 

example-

aria-label as aria-label  

Above worked for me!