我正在尝试从下拉列表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"
/>
答案 0 :(得分: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"
/>
答案 1 :(得分:1)
您可以将自己的样式/类添加到所需的元素,并使用后缀border-bottom
设置!important
规则。这将覆盖您框架中的规则。
.your-class{
border-bottom: 0px !important;
}
答案 2 :(得分:1)
在名为AutoCompleteComponent.js的文件下,检查queryBuilderContainer并注释或删除显示的边框。希望这会有所帮助。