I need help removing the border color from a dropdown with the style
border-bottom: 1px solid rgba(0, 0, 0, 0.42);After debugging, I discovered that it is originating from the class MuiInput-underline-2593.
However, the CSS class MuiInput-underline-2593:before is defined by the framework.
Could someone assist me in fixing this issue and also provide guidance on how to address similar problems in the future? Relevant code snippet and sandbox link are provided 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"
/>