57 lines
1.5 KiB
Markdown
57 lines
1.5 KiB
Markdown
|
---
|
||
|
|
title: Introducing Inline Styles
|
||
|
|
localeTitle: Introducción a los estilos en línea
|
||
|
|
---
|
||
|
|
## Introducción a los estilos en línea
|
||
|
|
|
||
|
|
## Solución
|
||
|
|
|
||
|
|
Este puede ser un poco complicado porque JSX es muy similar a HTML pero **NO es el mismo** .
|
||
|
|
|
||
|
|
Repasemos los pasos para que puedas entender la diferencia. Primero establece tu etiqueta de estilo en un **objeto JavaScript** .
|
||
|
|
|
||
|
|
```react.js
|
||
|
|
class Colorful extends React.Component {
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div style={{}}>
|
||
|
|
Big Red
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
Ahora tienes tu etiqueta de estilo establecida en un objeto vacío. Observe cómo hay dos conjuntos de llaves. Esta es una diferencia importante entre JSX y HTML.
|
||
|
|
|
||
|
|
En segundo lugar, vamos a configurar el color en rojo.
|
||
|
|
|
||
|
|
```react.js
|
||
|
|
class Colorful extends React.Component {
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div style={{ color: 'red' }}>
|
||
|
|
Big Red
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
Finalmente, vamos a establecer el tamaño de la fuente a 72px.
|
||
|
|
|
||
|
|
### Alerón
|
||
|
|
|
||
|
|
```react.js
|
||
|
|
class Colorful extends React.Component {
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div style={{ color: 'red', fontSize: '72'}}>
|
||
|
|
Big Red
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
Observe cómo el atributo JSX es **camelCase** . Esta es otra diferencia importante para recordar acerca de JSX. Además, probablemente notó que no hay unidad. En JSX, al configurar el atributo fontSize, la **unidad es opcional** y se configurará automáticamente a px si no se configura manualmente.
|