Сборка разработки React показывает div (кнопку), но производственная сборка делает ее невидимой - PullRequest
Новая
       72

Сборка разработки React показывает div (кнопку), но производственная сборка делает ее невидимой

1 голос
/ 13 июля 2020

Я создал веб-сайт для практики, и у меня есть кнопка «Галерея» поверх двух слайд-шоу. Он отлично работает в сборке для разработки, но в производственной сборке по какой-то причине кнопка не отображается. Я все еще могу его осмотреть и щелкнуть, но он просто невидим.

Я пытался добавить изображения imgur, но он не работает, поэтому вместо этого вот ссылка:

https://imgur.com/a/Geh6Sjw

Так выглядит приложение React. 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 слайд-шоу и немного изменил его вверху.

Если потребуется дополнительная информация (например, код компонента реакции), я был бы рад ее предоставить.

Любая помощь будет очень признательна, так как я очень озадачен тем, что вызывая это.

1 Ответ

1 голос
/ 14 июля 2020

Итак, проверив каждую строку, я обнаружил проблему. В приложении Create-react-app есть известная ошибка, из-за которой значение непрозрачности изменяется на 1%. Временное решение - пока просто использовать десятичные значения (пока оно не будет исправлено). Если вы хотите непрозрачность 85%, напишите вместо этого 0,85 и т. Д.

...