CSS изменение стиля при обновлении страницы

Question

Я сделал несколько стилей для элемента, который находится на одной из страниц моего ReactJS приложения. После добавления стиля вот так это выглядит (и так оно и должно быть на самом деле):

Когда я впервые захожу на страницу и это похоже на изображение выше, но когда я делаю refre sh на той же странице, это выглядит так:

Ниже приведен HTML код для вышеупомянутого элемента:

<div className={Style["search-div"]}>
   <input
      // className="form-control"
      id={Style["search-bar-input-field"]}
      type="text"
      placeholder="Search for Departments "
      aria-label="Search"
      onChange={this.processSearchBarInput}
    />

   <button className={Style["search-btn"]}>Search</button>
 </div>

Ниже приведен код CSS для вышеупомянутого элемента:

 .search-div {
     display: inline-flex;
     justify-content: space-between;
     border: 2px solid green;
     border-radius: 1rem;
     padding: 0.5rem;
}

#search-bar-input-field {
    height: 5vh;
    width: 45rem;
    border-radius: 1rem;
    font-size: 1.25em;
    border: 0.1rem solid green;
    padding: 1rem;
}

#search-bar-input-field:focus{
    outline: 0;
    box-shadow: 0 0 0 2pt skyblue;
}

.search-btn {
    border: 0.1rem solid green;
    width: 6rem;
    border-radius: 1rem;
    font-size: 1.15rem;
    margin-left: 1rem;
}

.search-btn:focus{
    outline: 0;
}

Я использовал этот же элемент панели поиска на других страницах моего приложения, то же самое происходит и на этих страницах. Я действительно не уверен, почему это происходит.

Любая помощь будет принята с благодарностью. Спасибо.

Answer 1

Поэтому, немного поигравшись с кодом, я внес небольшое изменение в свой код, который устранил проблему, с которой я столкнулся.

Код, который у меня был ранее:

<div className={Style["search-div"]}>
    <input
      id={Style["search-bar-input-field"]}
      type="text"
      placeholder="Search for Departments "
      aria-label="Search"
      onChange={this.processSearchBarInput}
    />

    <button className={Style["search-btn"]}>Search</button>
</div>

Изменение, которое я внес в приведенный выше код, заключалось в том, что я просто обернул input и тег кнопки в div следующим образом:

<div className={Style["search-div"]}>
  <div>
    <input
      id={Style["search-bar-input-field"]}
      type="text"
      placeholder="Search for Departments "
      aria-label="Search"
      onChange={this.processSearchBarInput}
    />

    <button className={Style["search-btn"]}>Search</button>
  </div>
</div>

И это решило проблему. Не уверен, хотя в отношении причины проблемы в первую очередь и как добавление тега div решило проблему. Ура!