Actualmente estoy aprendiendo ReactJS de un tutorial de youtube y estoy tratando de usar className para que la página se vea mejor. El tutorial que estoy siguiendo solo agregó: className="card"> en la etiqueta de apertura de un elemento div y cambió la apariencia de la página, aunque parece que no funciona para mí. Perdóneme si esta es una pregunta tonta, ya que no sé si tiene que importar sus propios archivos css para cambiar la apariencia y el tutorial simplemente no lo mostró. Agradecería cualquier respuesta. Gracias.
La diferencia aquí es que desea escribir JSX, y no HTML estándar... está MUY cerca, con algunas diferencias pequeñas pero importantes... aquí hay un ejemplo de lo mismo en HTML y JSX:
HTML: <div class="App">{/* some other code*/}</div>
JSX: <div className="App">{/* some other code */}</div>
La diferencia aquí es class/className. JSX usa mayúsculas y minúsculas para los atributos de un elemento HTML, además de usar nombres diferentes para algunos, como en este caso. ¡Este es solo el comienzo de las diferencias, pero con suerte esto lo llevará en la dirección correcta!
Debe aprender sobre CSS (hojas de estilo en cascada) (: a los elementos HTML se les pueden dar clases como esta
<html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="card">content</div> </body> </html> Y si tiene una hoja de estilo (archivo que termina en .css incluido en el <head> de su documento
/* styles.css */ .card { background-color: red; } Los estilos descritos en la sección de clase .card se aplicarán a su elemento html (en este caso, un fondo rojo)
Probablemente te perdiste un paso en tu tutorial sobre cómo incluir una hoja de estilo creada previamente.
Respuesta actualizada después de este comentario :
La razón de esto es que el css se está importando en un componente superior al que declaró ese código.
Código de ejemplo:
/* App JS */ import './App.css'; import Title from './Title.jsx'; function App() { return ( <div className="App"> <Title /> </div> ); } export default App; /* App.css */ .App{ font-size: 14px; } .title { color: #e60000; font-size: 20px; text-decoration: underline; } /* Title.jsx */ export default function (){ return <div className="title">Test</div> }