Html React开发构建显示一个div（按钮），但生产构建使其不可见

我一直在为工作建立一个网站，在两个幻灯片上方有一个“画廊”按钮。它在开发版本上运行得非常好，但是由于某些原因，生产版本没有显示该按钮。我仍然可以检查并单击它，但它是不可见的

这就是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（我后悔把我所有的css都写在一个全局文件中，清理它将是一场噩梦）：

我使用的是经过大量修改的npm幻灯片

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

---

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

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

您可以添加按钮组件的父级吗？当然，我刚刚添加了整个App.js，就css而言，它是body>.introGalleryContainer>.gallerybuttonwrapper该不可见按钮上的css是什么？在DOM上，这是.introGalleryContainer:这是.GalleryButtonRapper:这是.galleryButton:

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

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