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

Question

我正在尝试使用 git hub 支持在 Amazon Web Services(AWS) 上部署 React.js Web 应用程序。它已部署，我得到了 url，但应用程序看起来与在本地运行时不同。

我已按照here 给出的步骤进行操作。

我使用了默认的构建配置设置并且没有改变任何东西。

下面是在本地运行时的样子。

下面是它在 AWS amplify 提供的链接上的样子。

谁能指出我应该做些什么不同的事情？我需要配置一些东西吗？我已经为前端组件使用了 material-ui 和 react-bootstrap。

App.js - 渲染函数

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

链接的css文件：

.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

问题是由于在构建过程中 react 用于缩小 CSS 文件的 cssnano 包中的错误造成的。截至今天（2020 年 12 月），该问题仍在发生。

CSS 文件的缩小版本会在构建过程中将任何百分比值(xx%) 转换为 1%，这就是为什么您在开发中看不到它，因为您使用的是开发中的 CSS 文件的正常（非缩小）版本。

快速解决这个问题的方法是实际上不在 CSS 上使用任何 % 值，而是使用小数 (0.xx)，这样您的应用应该可以正常运行。

在 Github 上有一个关于这个问题的拉动，你可以在这里查看 cssnano repo

Answer 2

您的 CSS 的不透明度为 1%

有什么东西可以根据某些东西显示样式吗？