While diving into the world of learning React JSX, I've encountered a perplexing issue. After clicking the load button, the page redirects correctly but the CSS styling I've implemented fails to display.
Here is the HTML code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSX</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/javascript"></script>
</body>
</html>
Here is the CSS code:
body {
background-color: darkcyan;
color: bisque;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
.transform-images {
height: 50%;
width: 50%;
margin: 2%;
}
This is the JS code:
import React from "react";
import ReactDOM from "react-dom";
const randomIMG = "https://picsum.photos/200";
const newLocal = (
<center>
<a href="public/index.html">
<button type="button">load</button>
</a>
</center>
);
ReactDOM.render(
<div>
<h1 className="heading">My Favourite Foods</h1>
<div>
<img
className="transform-images"
src={randomIMG}
alt="messi_worldcup_image1"
></img>
<img
className="transform-images"
src={randomIMG}
alt="messi_worldcup_image2"
></img>
<img
className="transform-images"
src={randomIMG}
alt="messi_worldcup_image3"
></img>
</div>
{newLocal}
</div>,
document.getElementById("root")
);
Initially, the page loads perfectly but upon clicking the button, all the CSS styling disappears.