material ui sign in page

Try checking for state. You can add a state variable to validate if the user has signed in or not. If they have not, then do not render the header. Example with your code (slightly modified) below. Also, see documentation here for more info

Change state from "false" to "true" to see the change.

import React from "react";
import "./styles.css";
import Header from "./Components/Header";
import Login from "./Components/Login";



function Display(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <Header />;
  }
  return <Login />;
}

export default function App() {
  return (
    <Display className="App" isLoggedIn={false}>

    </Display>
  );
}