Uso de CSS global para estilizar en React

Supongamos que tenemos un componente React App, que tiene un div, y dentro del div - tres párrafos:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Vamos a estilizar este componente. Para esto, en la misma carpeta src con nuestro componente crearemos un archivo CSS normal con estilos styles.css para nuestras etiquetas.

En este archivo para el div crearemos una clase class1 con estilos:

styles.css.class1 {
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
}

Ahora agreguemos la clase class2 con estilos para el primer párrafo:

styles.css.class2 {
  color: orangered;
  font-weight: bold;
}

Clase class3 con estilos para el segundo párrafo:

styles.css.class3 {
  font-style: italic;
  color: brown;
}

Y, finalmente crearemos la clase class4 para el último párrafo:

styles.css.class4 {
  background-color: orange;
  font-weight: bold;
  color: white;
}     

Hemos terminado con el archivo CSS. Queda aplicar nuestros estilos CSS, que escribimos para las etiquetas. Volvamos a nuestro archivo App.js con el componente.

Lo primero que debemos hacer obligatoriamente - agregar al inicio del archivo la línea de importación de nuestro archivo de estilos styles.css:

App.jsimport './styles.css';

Ahora, para aplicar en el componente las clases CSS del archivo, usaremos el atributo class. Para el primer párrafo teníamos la clase class2, apliquémosla:

App.js<p class="class2">text</p>

De manera similar agreguemos las clases para las demás etiquetas. Como resultado obtendremos el siguiente código:

App.js<div class="class1">
  <p class="class2">text</p>
  <p class="class3">text</p>
  <p class="class4">text</p>
</div>