Thiết kế website giá rẻ

Question

I am building a Web Application using React. I created a html “Sandbox” of sorts to play around with the design and feel so I could easily show my bosses what it would look like and how it would function. I’m now porting it over to my React project and having a weird issue with my footer not being sticky.

I’m using Materialize CSS. However, even with the html looking exactly like my handwritten HTML I can’t get the footer to be stay at the bottom.

HTML Project Screenshot

React Project Screenshot

I have tried everything I can think of. I’ve added inline styles and gone over Materialize documentation and everything that seems to be mentioned by anything I’ve found doesn’t fix the issue.

Using Chrome I believe I think I can see why but I don’t know how to fix it or why it would be doing this type of thing to begin with. It looks like the display for the footer is being set to block when it should be flex. I have the correct settings in my CSS but they are being overridden in my React Project and I don’t know why. The picture below shows my issue.

HTML CSS

React CSS

I don’t know where these extra inherited styles are coming from and so I don’t know how to change them.

This is my HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <link type="text/css" rel="stylesheet" href="style.css">
    <title>HTML Version</title>
  </head>
  <body>
    <main>
      <div class="container">
        <div class="navbar-fi>xed">
          <nav class="nav-extended white">
            <div class="nav-wrapper white">
              <ul>
                <li>
                  <a href="test.html" class="brand-logo"><img src="logo64.png" alt="logo"/></a>
                </li>
              </ul>
            </div>
            <div class="nav-wrapper nav-2">
              <ul class="right">
                <li class="hoverable">
                  <a role="button" onClick="location.href='test.html';"><i class="material-symbols-outlined grey-text text-darken-1">logout</i></a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </main>
    <footer class="page-footer white">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="grey-text">Company</h5>
            <h6 class="grey-text text-darken-1">Awesome Slogan</h6>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="grey-text">Links</h5>
            <ul>
              <li><a class="grey-text text-darken-1" href="btuvent.com">Link 1</a></li>
              <li><a class="grey-text text-darken-1" href="gellert.com">Link 2</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright white">
        <div class="container ">
          <p class="grey-text text-darken-1">© 2024 Company Name</p>
        </div>
      </div>
    </footer>
  </body>
</html>

And my React code:

import 'materialize-css/dist/css/materialize.min.css';

interface FooterProps { }

function Footer(props: FooterProps) {
    return <footer className="page-footer white">
        <div className="container">
            <div className="row">
                <div className="col l6 s12">
                    <h5 className="grey-text">Company</h5>
                    <h6 className="grey-text text-darken-1">Awesome Slogan</h6>
                </div>
            </div>
        </div>
        <div className="footer-copyright white">
            <div className="container ">
                <p className="grey-text text-darken-1">© Company Name</p>
            </div>
        </div>
    </footer>
}

export default Footer;

I can assure you that I have a <header><main><footer> in the React as well so that is not the problem I’m facing. For sanity I’ve attached a screenshot of the react output:
React Generated HTML

Thiết kế website giá rẻ

Danh mục

Sticky Footer Works in HTML project but doesn’t work in React Project