Soy un nuevo aprendiz de react-js y me está costando agregar css a mis clases que tengo dentro de mi componente de reacción.
Aquí está el código actual:
import React from 'react'; const Home = () => { return ( <> <div class="container"> <h1 class="mainHeader">Home</h1> <h2>helloo</h2> </div> </> ); }; .container { // CSS would go here } export default Home;Solo en HTML y CSS, pude aplicar css en la clase div del contenedor simplemente usando '.' y cualquiera que sea el nombre de la clase. Sin embargo, esto me está dando un error.
Coloque el css en su propio archivo, con una extensión .css , luego impórtelo. Suponiendo que haya utilizado create-react-app para configurar su proyecto, ya tendrá la configuración adecuada para importar archivos css. Además, debe usar className para el accesorio, no class
// In a new file home.css: .container { // css goes here } // In the file you've shown: import React from 'react'; import './home.css'; const Home = () => { return ( <> <div className="container"> <h1 className="mainHeader">Home</h1> <h2>helloo</h2> </div> </> ); }; export default Home;O puede declararlo en formato json o como lo haría con un objeto, no en forma de CSS. Trátelo como si estuviera escribiendo en js, lo que realmente es. Vea la edición a continuación:
import React from 'react'; const Home = () => { return ( <> <div style={container}> <h1 className="mainHeader">Home</h1> <h2>helloo</h2> </div> </> ); }; const container = { // CSS would go here color: 'red', background: 'blue' } export default Home;