Css Algolia自动完成在材质输入字段中不可见

我正在我的项目中使用，以及。我已经做了一个搜索输入字段，我想在自动完成下拉菜单中显示结果。这是html：

  <form action="/search" method="get">
    <div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon">
      <i class="material-icons mdc-text-field__icon" tabindex="0">search</i>
      <input name="q"
             type="text"
             class="mdc-text-field__input search-input-js aa-input-search"
             placeholder="Search for players and videos ..."
             aria-label="Full-Width Text Field">

    </div>
  </form>

---

我遇到的问题是，下拉菜单在

mdc文本字段--box

中不可见。如果我没有使用box字段，而是使用normal字段，则下拉菜单可见。如何解决此问题，使下拉菜单在

mdc文本字段--box

中也可见？

您应该更新CSS，以覆盖

.mdc文本字段--box

上的溢出，并更新伪元素

.mdc-text-field--box {
  overflow: visible;
}

.mdc-text-field--box:after, 
.mdc-text-field--box:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

你也可以在网上找到一个例子

.mdc-text-field--box {
  overflow: visible;
}

.mdc-text-field--box:after, 
.mdc-text-field--box:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}