Issue
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"
/>
Solution
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;
}
Answered By - Itay Gal
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.