Photo by Luis Alfonso Orellana on Unsplash

Estilizando nuestros componentes en React

Existen varias maneras de estilizar nuestros componentes en React. Cuál utilizar y cuál no dependerá de nuestras preferencias y complejidad de la aplicación. Hoy veremos cuales son algunas de esas opciones, para que la próxima vez que tengamos que tomar la decisión de cual método usar, tengamos mayor conocimiento sobre cada una de ellas.

Usando una hoja de estilos

En react podemos importar una hoja de estilos para nuestro componente usando import, para los que ya hemos trabajado con create-react-app será algo que ya es conocido, puesto que la configuración y estructura inicial de la aplicación usa este método. Igualmente mirémoslo un poco más a fondo.

// App.css
.App {
  width: 100px;
  height: 100px;
  border: 10px solid chocolate;
  border-radius: 10px;
}

Declaramos los estilos anteriores para crear un cuadro de 100 x 100, con un borde solido de 10px y color chocolate, y un radio de 10px. Todos estos estilos los estamos aplicando sobre el elemento con clase App. Hasta ahora nada nuevo, es lo mismo que hemos hecho siempre desde que empezamos a aprender CSS. Lo que debemos hacer ahora, es importar esos estilos para que nuestro componente los pueda utilizar.

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App"></div>
    );
  }
}
export default App;

Podemos ver como no usamos import ... from ...; como estamos acostumbrados, con solo importar el archivo ya estamos estableciendo esa relación componente-estilos. Es importante notar que, cuando importamos archivos de esta manera, debemos escribir también la extensión de este.

Código: GitHub

Usando estilos en linea

Todos los componentes web reciben una propiedad style. A esta propiedad le podemos pasar un objeto de JavaScript con nuestros estilos, es como usar CSS pero con las siguientes diferencia o cambios:

1. Los nombres de las propiedades se deben escribir usando camelCase. Puesto que cada propiedad va a ser una llave de nuestro objeto.
2. Estas propiedades solo reciben una cadena de texto o número como valor.
3. No es necesario declarar específicamente que una medida está en pixeles. El número 10 es lo mismo que la cadena de texto 10px.

Podemos declarar los estilos directamente en la propiedad style:

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div 
        className="App" 
        style={{ 
          width: 100, 
          height: 100, 
          border: '10px solid chocolate',     
          borderRadius: 10 }}
      />
    );
  }
}
export default App;

O podemos almacenar nuestros estilos en una variable para mantener nuestro código más limpio y organizado:

import React, { Component } from 'react';
const styles = {
  box: {
    width: 100,
    height: 100,
    border: '10px solid chocolate',
    borderRadius: 10
  }
};
class App extends Component {
  render() {
    return (
      <div
        className="App"
        style={styles.box}
      />
    );
  }
}
export default App;

Código: GitHub

Usando styled-components

Es una librería que aprovecha una de las nuevas funcionalidades de ES6 para permitirnos escribir CSS junto con nuestros componentes. Esta librería tiene varias funcionalidades que quisiera tocar más a fondo, por lo que no hablare más sobre esta en este artículo. Y mañana dedicare un artículo completo a esta.

Por ahora les dejo como ejemplo como crear el mismo cuadro de los ejemplos anteriores usando styled-components:

import React, { Component } from 'react';
import styled from 'styled-components';
const Box = styled.div`
  width: 100px;
  height: 100px;
  border: 10px solid chocolate;
  border-radius: 10px;
`;
class App extends Component {
  render() {
    return (
      <Box />
    );
  }
}
export default App;

Código: GitHub

En Resumen

No estamos atados a usar un solo método cuando hablamos de estilizar nuestros componentes en React. El uso de uno o otro método dependerá de, tus preferencias, y la complejidad de tu aplicación.

Podemos usar, entre otros métodos, estilos en una hoja de estilos, estilos en linea, o usar un librería comostyled-components.

Código fuente: GitHub