Estilos en nuestros componentes

Estilos con react

Algo muy común durante el desarrollo de aplicaciones, es aplicar distintos estilos. Con react tenemos dos formas de agregarle estilos a nuestros componentes:

className prop

Todos los componentes react pueden recibir la propiedad className la cual funciona igual que el atributo class de los elementos HTML.

Veamos un ejemplo.

const component = () => <p className='text'>Hello word</p>

Como vemos, pasamos a nuestro componente la propiedad className que cómo dijimos anteriormente funciona exactamente igual que el atributo class de los elementos HTML. Esto quiere decir que en algún lado de nuestra aplicación tendremos un archivo CSS que contendrá una class text.

style prop

Todos los componentes react pueden recibir la propiedad style la cual recibe un object con los estilos que deseamos agregar. React los agregará inline en el HTML resultante.

Veamos un ejemplo.

const style = {
    color: 'red',
    fontSize: 22,
};
const component = () => <p style={style}>Hello word</p>

El resultado será un elemento <p> con el estilo inline. El <p> contendrá un texto de color rojo y fuente tamaño 22px, con la frase Hello word.

Cómo habrán notado, las keys del object que le pasamos a la prop style deben estar escritos en camel case. Otra particularidad es que los pixeles los estamos pasando como un number sin el 'px'.

Nota

En general, no se recomienda utilizar la prop style como medio principal para dar estilos a nuestra aplicación. Al igual que pasa en HTML los estilos inline no escalan.

Existen algunas librerías muy interesantes para apoyar a react en temas de estilos, estas son algunas de ellas: styled-components, css-modules, JSS, Radium.