Aplicando Estilos en Línea con JSX

En JSX, estamos ejecutando JavaScript y no HTML. Así que cuando se trata de aplicar estilos en línea, JSX sigue el camino del JavaScript, no del HTML. En JavaScript, se aplican los estilos utilizandoun objeto en el que las propiedades son camelCase y el valor es una cadena.

Considera el código siguiente:

<div style={{fontSize:'12px',color:'red'}}>
    ¡Hola Mundo!
</div>

En este ejemplo, hemos aplicado estilos en línea a un elemento div. La propiedad font-size en CSS se ha convertido en fontSize en JSX porque estamos usando notación camelCase, como en JavaScript. Además, el valor de fontSize es una cadena ('12px'), no un entero, porque en JavaScript todos los valores de las propiedades CSS son cadenas. El valor de color también es una cadena ('red').

Es importante notar que en JSX, la propiedad se pasa como un objeto literal, que es por eso que usamos dos llaves para envolver el objeto de estilo ({{fontSize:'12px',color:'red'}}). La primera llave es para la expresión JavaScript y la segunda llave es para una expresión del objeto literal.

Para resumir, la forma correcta de escribir un estilo en línea que especifica font-size:12px y color:red; en JSX es style={{fontSize:'12px',color:'red'}}, tal como se mencionó en la opción correcta de la pregunta del quiz.

Es importante tener en cuenta que usar estilos en línea es útil si quieres dar estilos específicos a un único elemento. Pero en la mayoría de los casos, se recomienda usar CSS externo o CSS en archivos JavaScript para manejar y mantener tus estilos de manera más eficiente.