Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Poner Nombre de Clase CSS en React JS

Como Poner Nombre de Clase CSS en React JS

Como Poner Nombre de Clase CSS en React JS

Las clases son elementos importantes que permite añadir estilos CSS a un elemento HTML o usarlos como selectores.

En React podemos agregar clases de CSS de manera muy fácil.

En este tutorial te enseñaré a Como Poner Nombre de Clase CSS en React JS, vamos con ello.

Mediante React JS puedes agregar varias clases CSS

La forma en que te mostraré a como agregar una clase CSS a un elemento HTML en React, te servirá tanto si estás trabajando con el lenguaje de programación JavaScript o con el lenguaje de programación TypeScript.

Como Poner 1 Nombre de Clase CSS en React JS

Tomemos como ejemplo estas 2 imágenes o elementos HTML:


Si vamos al navegador puedo ver que las imágenes se muestran sin problema:

Puedes agregarle clases CSS a diferentes elementos HTML y no solo a imágenes

Entonces usaré la primera imágen a la cual le agregaré una clase CSS que le añada un borde naranja.

Para ponerle una clase CSS coloco el atributo className=”mi-clase-css” a la imagen o elemento HTML. 

Exactamente para mi ejemplo usaré el nombre de clase className=”borde-naranja” en mi imagen.

Entonces el código ahora se ve así:


En mi hoja de estilos CSS le agrego las siguientes propiedades a la clase CSS borde-naranja:


Si voy al navegador, puedo ver que la primera imagen tiene un borde y por ende le agregamos la clase CSS correctamente:

Si tienes una buena base de diseño en UX/UI lograrás crear interfaces más amigables

Ahora veamos como agregar más de un nombre de clase CSS en React.

Como Poner Más de 1 Nombre de Clase CSS en React JS

Si necesitas poner más de 1 nombre de clase CSS en React JS, solo colócalo después del primer nombre de clase.

Por ejemplo quiero poner los nombres de clases borde-naranja y margen-abajo a mi imagen.

Para ello solo los separo mediante un espacio en blanco dentro del atributo className=”borde-naranja margen-abajo”:


Fijate que a cada nombre de clase independiente le puse un guión en medio, esto sirve para poner nombre de clases con palabras separadas entre sí.

Por ejemplo: mi-bonita-clase, borde-naranja, mi-nueva-clase-css, etc.

Entonces si voy al navegador, puedo ver que mi imagen o elemento HTML, ya no solo tiene un borde naranja, sino que también tiene un margen en la parte de abajo.

Es decir se aplicaron las 2 clases CSS correctamente className=”borde-naranja margen-abajo”:

Mi hoja de estilos CSS entonces tiene ahora 2 clases CSS:


Puedes agregar todas las clases CSS que desees en React, eso si recuerda no usar muchas y haslo solo si es necesario.

Así de fácil puedes Poner un Nombre de Clase CSS en React JS.

Conclusión

En este tutorial has aprendido a Como Poner Nombre de Clase CSS en React JS.

Te servirá como base para poner nombres de clase CSS de forma más avanzada en React.

Recuerda poner en práctica todo lo aprendido, así es como serás un mejor desarrollador en React.

Nota(s)

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil