React 开发版本显示一个 div(button) 但生产版本使其不可见答案

【问题标题】：React development build shows a div(button) but the production build makes it invisibleReact 开发版本显示一个 div(button) 但生产版本使其不可见
【发布时间】：2020-07-13 18:23:17
【问题描述】：

我一直在建立一个工作网站，并在两个幻灯片的顶部有一个“图库”按钮。它在开发版本上运行良好，但生产版本由于某种原因没有显示按钮。我仍然可以检查并单击它，但它只是不可见。

https://imgur.com/a/Geh6Sjw

这就是 React App.js 的样子：

 <div>
      <div className="navbarContainer">
        <Navbar />
      </div>
      <Switch>
        <Route exact path="/">
          <div className="homePage">
            <div className="coverContainer">
              <Cover />
            </div>
            <div className="servicesButtonContainer">
              <ServicesButton />
            </div>
            <div className="introGalleryContainer">
              <SlideshowLeft />
              <SlideshowRight />
              <GalleryButton />
            </div>
            <div className="reviewsContainer">
              <Reviews />
            </div>
            <div className="infoContainer">
              <Info />
            </div>
          </div>
        </Route>
        <Route path="/services">
          <div className="servicesContainer">
            <Services />
          </div>
        </Route>
        <Route path="/gallery">
          <div className="galleryContainer">
            <Gallery />
          </div>
        </Route>
      </Switch>
    </div>

这是父 css：

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-overflow-style: none;

  background-color: black;
  height: 100%;
  width: 100%;
  overflow: auto;
  /* z-index: 1; */
}
html {
  overflow: hidden;
  height: 100%;
}
body::-webkit-scrollbar {
  display: none;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

这是画廊部分和主体的 css（我很遗憾将我所有的 css 都写在一个全局文件中，清理它会是一场噩梦）：

.introGalleryContainer .image-gallery-image {
  object-fit: cover !important;
  max-height: 100% !important;
}
.introGalleryContainer {
  display: flex;
  justify-content: center;
  position: relative;

  width: 100%;

  border-bottom: thick solid white;
}
.twinSlideshow {
  width: 100%;
  z-index: 1;
}
.galleryButtonWrapper {
  display: inline-block;
  border-radius: 1%;
  border-style: solid;
  border-width: thin;
  border-color: white;
  background-color: black;
  cursor: pointer;
  opacity: 85%;

  max-width: 30%;
  min-width: 20.1%;

  margin-top: 20%;
  padding: 1.5%;

  position: absolute;
  z-index: 2;

  text-align: center;
  color: white;
  font-family: "Playfair Display";
  font-size: 2vw;
}
.galleryButtonWrapper:hover {
  background: #353535;
}

我正在使用经过大量修改的 npm 幻灯片。

如果需要更多信息（如反应组件代码），我很乐意提供。

非常感谢任何帮助，因为我对造成这种情况的原因感到非常困惑。

【问题讨论】：

可以添加按钮组件的父级吗？
当然，我只是添加了整个 App.js，就 css 而言，它是 body > .introGalleryContainer > .galleryButtonWrapper
那个隐形按钮上的css是什么？在 DOM 上
这是 .introGalleryContainer：imgur.com/S1Rk4wl 这是 .galleryButtonWrapper：imgur.com/49Rb2f4 这是 .galleryButton：imgur.com/GTDc4zT

标签： html css reactjs production invisible

【解决方案1】：

所以在检查每一行之后我发现了问题。 Create-react-app 有一个已知错误，它将不透明度值更改为 1%。一种解决方法是现在简单地使用十进制值（直到它被修复）。如果您想要 85% 的不透明度，请改为 0.85，依此类推。

【讨论】：