css - tipo - Generación de estilo de tamaño de fuente en línea usando ReactJS

tipo de letra y color en css

Question

Estoy tratando de hacer algo como esto en 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>);
}
});

El problema es que recibo este error cuando ejecuto mi código: "Fallo en la compilación del módulo: Error: Parse Error: Línea 5: Token inesperado -" aparentemente, a React no le gusta que la font-size tenga un guión. ¿Cómo puedo solucionar esto? ¿Hay alguna manera de escapar de ese personaje para reaccionar? ¿Hay alguna propiedad css diferente que reaccione como "me gusta" y que haga lo mismo?

¡Gracias!

Answer 1

Como https://reactjs.org/docs/dom-elements.html dice,
Necesitamos eliminar ''-'' y upperCase excepto la primera palabra

Ejemplo-
background-color as backgroundColor,

Lo mismo será aplicable en todas partes excepto en algunas

aria-* and data-*

ejemplo-

aria-label as aria-label 

Por encima de funcionó para mí!

Answer 2

Use fontSize lugar de font-size

La solución es a las propiedades de camelCase que usualmente contienen un guión.

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

Respondí mi propia pregunta :)

Answer 3

Yo uso fontSize: números de píxeles