Así que estoy trabajando en un proyecto personal y tratando de agregar estilo a mi JSX. Por alguna razón, los cambios que intento hacer no se reflejan en el resultado. Todo está enlazado correctamente. ¿Me he perdido algo?
import React from "react" export default function Header() { return ( <header className="header"> <img src="./images/troll-face.png" className="header--image" /> <h2 className="header--title">Meme Generator</h2> <h4 className="header--project">React Course - Project 3</h4> </header> ) } * { box-sizing: border-box; } body { font-family: "Karla", sans-serif; margin: 0; } .header { display: flex; align-items: center; height: 65px; background: linear-gradient(90deg, #303030 1.18%, #a626d3 100%); color: white; padding: 20px; } .header--image { height: 100%; margin-right: 6px; } .header--title { font-size: 1.25rem; margin-right: auto; } .header--project { font-size: 0.75rem; font-weight: 500; } <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="../src/style.css" /> </head> <body> <div id="root"></div> <script src="../src/index.js"></script> </body> </html>así es como se organizan mis archivos
Y aquí está la salida en el navegador.
No sé por qué el CSS no lee. Gracias por la ayuda por adelantado.
