Question

我正在尝试从下拉列表border-bottom: 1px solid rgba(0, 0, 0, 0.42);中删除边框颜色

调试时，我发现它来自此类MuiInput-underline-2593

但是CSS类MuiInput-underline-2593:before来自框架。

你们能告诉我如何解决它吗？这样将来我就可以自己修复它。在下面提供我的相关代码段和沙箱链接

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

基本上，您可以删除应该删除的整个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"
        />

Answer 2

您可以将自己的样式/类添加到所需的元素，并使用后缀border-bottom设置!important规则。这将覆盖您框架中的规则。

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

Answer 3

在名为AutoCompleteComponent.js的文件下，检查queryBuilderContainer并注释或删除显示的边框。希望这会有所帮助。

如何从下拉的边框底部移除边框颜色？

3 个答案: