如何刪除材料 ui 自動完成文本字段中的邊框

Question

 <Autocomplete
                  style={{ width: "178px" }}
                  options={getCites()}
                  renderInput={(params) => (
                    <TextField
                      color="warning"
                      className={Styles.brandfont}
                      {...params}
                      label=""
                      placeholder="All Emirate"
                      variant="standard"
                      inputProps={{
                        disableUnderline: true,
                        ...params.inputProps,
                        style: { fontSize: "1rem" },
                        underline: {
                          "&&&:before": {
                            borderBottom: "none",
                          },
                          "&&:after": {
                            borderBottom: "none",
                          },
                        },
                      }}
                    />
                  )}
                />

這是我的代碼，我需要刪除文本字段中的底部邊框，我嘗試了很多方法都不起作用。 如果我嘗試安裝 mui make styles 它會顯示一些錯誤。 單獨使用 css 幫助解決這個問題。

在此處輸入圖像描述

Answer 1

Input 具有previousElementSibling ，它在input的父級上設置邊框底部。

它是一個::before偽元素。

你可以使用這個技巧。

.MuiInputBase-root::before {
  border: none;
}

參考

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/previousElementSibling