如何从下拉的border-bottom底部删除边框颜色？

Question

I'm trying to remove the border color from the drop down border-bottom: 1px solid rgba(0, 0, 0, 0.42);

When I debugged I found its coming from this class MuiInput-underline-2593

But the CSS class MuiInput-underline-2593:before is coming from the framework.

Can you guys tell me how to fix it. So that in future I can fix it myself. Providing my relevant code snippet and sandbox link below

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

Basically you can just delete the whole CSS part it should be gone.

so your code would look like:

<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

You can add your own style/class to the element you need and set border-bottom rule with an !important suffix. This will override the rule from your framework.

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

Answer 3

Under the file named AutoCompleteComponent.js check queryBuilderContainer and comment or delete the border shown. Hope this helps.