Ahora llegamos a la discusión principal Con React, no especificamos el CSS de la misma manera que lo hacemos con el HTML simple. Antes de entrar en más detalles, me gustaría recordaros rápidamente que no escribimos HTML con React, escribimos JSX . Lo que quiero decir con esto es que JSX se transpondrá en React.createElement(….) y todos los atributos se convertirán en la parte del objeto props.
En React, los estilos en línea no se especifican como una cadena. El atributo style acepta un objeto JavaScript con propiedades CamelCased.
Por ejemplo:margin-top -> marginTop, border-radius -> borderRadius, font-weight -> fontWeight, background-color -> backgroundColor
A continuación se describen los pasos básicos para definir CSS:1. Cambiar el nombre de la propiedad CSS a su versión CamelCase como «background-color» a «backgroundColor», «font-size» a «fontSize», etc.2. Crear un objeto con todas las propiedades CSS como claves y sus valores CSS.3. Asignar ese objeto al atributo style.
Para obtener la misma salida formateada «Hola Mundo», necesitamos escribir un componente de Reacción de esta manera:
1234567891011121314151617181920importReactfrom$0027react$0027;importReactDOMfrom$0027react-dom$0027;functionHelloWorld(){const styleObj ={ fontSize:14, color: "#4a54f1", textAlign: "center", paddingTop: "100px",}return(<p style={styleObj};HelloWorld! En lugar de crear un objeto separado, también podemos escribirlo de esta manera: www. hp.com.mx. Para una mejor legibilidad, defínelo por separado. */ReactDOM.render(<HelloWorld/;,document.getElementById($0027app$0027));javascript
Si miran el código de arriba, notarán que con fontSize, no he usado ninguna unidad y sólo he asignado un número y una cadena a paddingTop. Y lo hice a propósito. Básicamente, la idea es:
Escenarios útiles
Ahora, asumamos que queremos computar o modificar dinámicamente una propiedad CSS de un elemento dado. Por ejemplo, si queremos cambiar el color de la fuente, cambiar la propiedad de visualización/imagen de fondo con alguna condición, cambiar el ancho o alto de un elemento, etc., entonces es fácilmente alcanzable usando el CSS en línea.
Aquí hay otro e-Ejemplo, asumamos que tenemos una lista de todo. Cada elemento puede tener un par de estados, puede ser completado o, digamos, dejado a la fe. Para diferenciar, podemos resaltar los elementos pendientes en rojo.
12345678910111213141516171819importReactfrom$0027react$0027;importReactDOMfrom$0027react-dom$0027;const todoList =[{ title:$0027item 1$0027, isDone:false},{ title:$0027item 2$0027, isDone:true}]functionTodoItem({ title, isDone }){return(<div><p style={{{color: isDone? $0027verde$0027:$0027rojo$0027}};{título}</promedio(div);)}funciónTodo(props){const todoList = props.todoList.map(el={i};};TodoItem key={el.id} título={el. title} isDone={el.isDone}/>)return<div>{todoList}</div>}ReactDOM.render(<Todo todo todoList={todoList}/>,document.getElementById($0027app$0027));javascript
Desventajas de la CSS en línea
- Duplicación de las propiedades CSS
- Las propiedades CSS se limitarán a un ámbito de componentes solamente, por lo que hay cero reusabilidad
- No podremos utilizar todo el poder del CSS, por ejemplo, no hay pseudo-clases, pseudo-elementos, consultas de medios, animaciones de fotogramas clave, etc.
- Es difícil de mantener o editar/actualizar, y mucho CSS en línea puede reducir la legibilidad del código
- Esto dificulta la actuación, en cada re-presentación el objeto de estilo será recomputado
Enlaces útiles:
Detalles sobre JSX: