0

Tengo un problema y es que recién empiezo con react y ya tengo problema, mi problema es que mi código html los componentes no esta leyendo mi archivo css en su defecto también no esta haciendo los cambios pongo aquí mi código de mi archivo .js

import React from 'react';
 import styles   from '../css/ButtonModule.css';

     function Saludar( props ) {
    const { nombre = "Sin nombre", saludar } = props;
    return    ( 
         <div>
               <p className={ styles.buttonRed } > Hola { nombre } </p>                   
               <button className = { styles.buttonRed } >Enviar </button>
         </div>   

      );
  } 

   export default Saludar; 

Este es todo lo que tengo en mi archivo ButtonModule.css

.buttonRed {
color       : red;
font-size   : 20px;
}

pero sin embargo no me muestra nada rojo en la web. aqui pongo una imagen de la estructura de las carpetas, archivos etc.

Asi estan mis carpetas y archivos

Muchas gracias , si hay algo que deba aumentar a la pregunta, con gusto.

2
  • 2
    por defecto create-react-app no tiene esa configuracion para usar los estilos asi, tendiras que importar asi ` import '../css/ButtonModule.css';` y usar las clases normal className="buttonRed". Tendrias que hacer la config de css modules para usarlo como en tu ejemplo
    – Isaac
    el 2 may. 2020 a las 3:36
  • muchas gracias amigo si me funciono asi solo poniendo entre comillas "buttonREd" el 2 may. 2020 a las 3:44

2 respuestas 2

1

Trata solo importando los estilos, y poniendo las clases como string igual al del html normal

import React from 'react';
import '../css/ButtonModule.css';

     function Saludar( props ) {
    const { nombre = "Sin nombre", saludar } = props;
    return    ( 
         <div>
               <p className='buttonRed' > Hola { nombre } </p>                   
               <button className='buttonRed' >Enviar </button>
         </div>   

      );
  } 

   export default Saludar; 
0

Te recomendaría hacer todas las importaciones de css en el index.html de tu proyecto de react, una vez declarando tus estilos en el header de tu html el contenedor root de react aplicara todos los cambios de estilo de tu proyecto.

<html>
    <header>
       <link href="css/Buttons.css" />
    </header>

    <body>
       <div id="reactDomContainer"></div>
    </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.