Как убрать цвет рамки с выпадающего бордюра?

Question

Я пытаюсь удалить цвет границы из выпадающего списка 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

Вы можете добавить свой собственный стиль / класс к нужному элементу и установить правило border-bottom с суффиксом !important.Это заменит правило из вашей структуры.

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

Answer 2

В файле с именем AutoCompleteComponent.js проверьте queryBuilderContainer и прокомментируйте или удалите показанную границу.Надеюсь, это поможет.

Answer 3

По сути, вы можете просто удалить всю часть 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"
        />