How to deploy react js web app with all the components to Amazon Web Services amplify?

I am trying to deploy React.js web app on Amazon Web Services(AWS) amplify using git hub support. It has been deployed and I got the url but the app doesn't look the same as it does when run locally.

I have followed the steps given here.

I have used the default build configuration settings and haven't changed anything.

Below is how it looks when run locally.

Below is how it looks on the link provided by AWS amplify.

Can anybody please point out what should I do differently? Do I need to configure something? I have used material-ui and react-bootstrap for frontend components.

App.js - render function

render() {
return (
  <div className={classes.container}>
    <AppBar
      className={classes.navbar}
      style={{ backgroundColor: "transparent" }}
      position="static"
    >
      <Toolbar>
        <IconButton
          edge="start"
          className={classes.menuButton}
          color="inherit"
          aria-label="menu"
        >
          <img alt="Logo" className={classes.logo} src={Logo} />
        </IconButton>
        <Typography variant="h6">TIP-TOP NX</Typography>
      </Toolbar>
    </AppBar>
    <div className={classes.content}>
      <div className={classes.frame}>
        <Avatar style={{ margin: "auto", marginTop: "1em" }}>
          <LockOutlined />
        </Avatar>
        <h3 style={{ color: "black", margin: "20px" }}>Sign in</h3>
        <div
          style={{
            marginBottom: "3vh",
            display: this.state.invalid ? "block" : "none",
          }}
        >
          <Typography variant="h6" color="error">
            Invalid details!
          </Typography>
        </div>
        <TextField
          fullWidth
          required
          label="Email"
          variant="outlined"
          error={this.state.errors.email.length > 0}
          onChange={this.changeHandler("email")}
        />
        <TextField
          fullWidth
          required
          label="Password"
          variant="outlined"
          type="password"
          error={this.state.errors.password.length > 0}
          onChange={this.changeHandler("password")}
          style={{ marginTop: "1em" }}
        />
        <Button
          onClick={this.submitHandler}
          style={{ margin: "5vh auto" }}
          variant="contained"
          color="primary"
          size="large"
        >
          Submit
        </Button>
      </div>
    </div>
    <footer className={classes.footer}>&copy; 2020-2021</footer>
  </div>
);
}

Linked css file:

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #555; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #555,
    #000
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #555, #000);
}
.logo {
  height: 5vh;
  border-radius: 50%;
  margin-right: 1vw;
}
.navbar {
  background-color: transparent;
  color: white;
  border-bottom: 1px solid white;
}
.active {
  color: black;
  background-color: white;
  padding: 0.5em 1em 0.5em 1em;
  font-size: 1.2em;
  box-sizing: border-box;
  opacity: 80%;
}
.content {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  text-align: center;
  box-sizing: border-box;
}
.frame {
  background-color: #e0e0e0;
  width: 30%;
  height: auto;
  opacity: 80%;
  padding: 20px;
  margin: 20px;
  box-sizing: border-box;
  border: 2px white solid;
  color: black;
}
.footer {
  color: white;
  text-align: center;
  border-top: 1px solid white;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 1000px) {
  .frame {
    width: 50%;
  }
}