ReactStrap：下拉项目在手机上显示为透明

Posted 2023-03-05

【中文标题】ReactStrap：下拉项目在手机上显示为透明

【英文标题】：ReactStrap: DropDown items appear transparent on phone

【发布时间】：2021-02-17 20:36:04

【问题描述】：

我有这个在桌面上完美运行的下拉菜单： 但是，由于某种原因，在电话上它是透明的：

这是实现它的代码：

<UncontrolledDropdown>
                <DropdownToggle
                  aria-expanded=false
                  aria-haspopup=true
                  caret
                  color="danger"
                  data-toggle="dropdown"
                  href="#pablo"
                  id="dropdownMenuButton"
                  nav
                  onClick=(e) => e.preventDefault()
                  role="button"
                >
                  this.state.category == "" ? "category" : this.state.category
                </DropdownToggle>
                <DropdownMenu
                  aria-labelledby="dropdownMenuButton"
                  className="dropdown-danger"
                >
                  categoryDropDownItemsNames.map((categoryDropDownName) => (
                    <DropdownItem
                      tag="span"
                      name="category"
                      value=categoryDropDownName
                      // onClick=(e) => e.preventDefault()
                      onClick=this.onCategoryChosen
                    >
                      categoryDropDownName
                    </DropdownItem>
                  ))
                </DropdownMenu>
              </UncontrolledDropdown>
       

知道为什么会这样吗？

【问题讨论】：

嗨，有趣的是，当您在 chrome 中模拟移动设备时会发生这种情况吗？

是的。我在模拟器和真机上都测试过

【参考方案1】：

我认为这是我使用的模板的问题。无论如何，这是我修复它的方法：

 <DropdownItem
                      tag="span"
                      name="category"
                      value=categoryDropDownName
                      onClick=this.onCategoryChosen
                      /** I need to force this style, otherwise it'll appear transparent on mobile */
                      style=
                        backgroundColor: "rgba(256, 256, 256, 1)",
                      
                    >
                      categoryDropDownName
                    </DropdownItem>