9) Dando estilo a nuestro componente

Previous8) Condicionando un render Next10) Los class component

Last updated 7 years ago

9) Dando estilo a nuestro componente

Estilos con react

Una de las cosas que hacemos cómo desarrolladores es dar estilos a nuestras aplicaciones. Con react tenemos dos formas de agregarle estilos a nuestros componentes, a continuación explicaremos cada uno de ellos.

className prop

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

Veamos un ejemplo.

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

Como puedes ver, 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.

Podría ser algo así.

style.css

.text {
    color: red;
}

component.js

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

En este caso, el resultado es un texto de color rojo con la frase Hello word.

style prop

Todos los componentes react pueden recibir la propiedad la cual recibe un object con los estilos que deseamos agregar. React los agregará 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.

Para aprender más puedes ingresar aquí:

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.

Práctico

Llevemos esto a la práctica:

Previous8) Condicionando un render Next10) Los class component

Last updated 7 years ago