如何将带有所有组件的 React js web 应用程序部署到 Amazon Web 服务放大？

Question

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%;
  }
}

Answer 1

The problem is happening due to a bug in cssnano package used by react to minify your CSS file during the build. The issue is still happening as of today (December 2020).

The minified version of the CSS file will convert any value in percentages (xx%) to 1% during the build, that's why you don't see it in development because you're using the normal (non-minified) version of the CSS file while in development.

The quick fix to this problem is to actually not use any % values on CSS, instead use decimals (0.xx) and your app should work just fine.

There's a pull regarding this issue on Github, you can check it out here on cssnano repo

Answer 2

You have an opacity at 1% on your CSS

Is there something that displays a style depending on something?