如何從下拉的border-bottom底部刪除邊框顏色？

Question

我正在嘗試從下拉的border-bottom: 1px solid rgba(0, 0, 0, 0.42);刪除邊框顏色border-bottom: 1px solid rgba(0, 0, 0, 0.42);

當我調試時，我發現它來自此類MuiInput-underline-2593

但是CSS類MuiInput-underline-2593:before來自框架。

你們能告訴我如何解決它嗎？ 這樣將來我就可以自己修復它。 在下面提供我的相關代碼段和沙箱鏈接

https://codesandbox.io/s/4x9lw9qrmx

MuiInput-underline-2593:before {
    left: 0;
    right: 0;
    bottom: 0;
    content: "\00a0";
    position: absolute;
    transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
    pointer-events: none;
}


<Select
    className={classes.queryBuilderContainerItem}
    classes={classes}
    styles={selectStyles}
    options={this.state.suggestions}
    components={components}
    value={this.state.single}
    onChange={this.handleChange("network")}
    placeholder="Search a to do"
/>

Answer 1

基本上，您可以刪除應該刪除的整個CSS部分。

因此您的代碼如下所示：

<Select
          className={classes.queryBuilderContainerItem}
          classes={classes}
          styles={selectStyles}
          options={this.state.suggestions}
          components={components}
          value={this.state.single}
          onChange={this.handleChange("network")}
          placeholder="Search a to do"
        />

Answer 2

您可以將自己的樣式/類添加到所需的元素，並使用!important后綴設置border-bottom規則。 這將覆蓋您框架中的規則。

.your-class{
   border-bottom: 0px !important;
}

Answer 3

在名為AutoCompleteComponent.js的文件下，檢查queryBuilderContainer並注釋或刪除顯示的邊框。 希望這可以幫助。