css not working when the page is reloaded by a button-CodePudding

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.

CodePudding user response：

Looks like your url path to css is not correct. Try:

<link rel="stylesheet" href="/styles.css" />