I’m currently learning react jsx and I’m facing a problem. When I press the load button, the page redirects fine but the css that I’ve applied doesn’t show up.
following is the html code:
<!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>
following is the css:
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")
);
The page loads fine the first time but all the css disappears when I press the button.
>Solution :
Looks like your url path to css is not correct. Try:
<link rel="stylesheet" href="/styles.css" />