如何从下拉边框底部中删除边框颜色？答案

【问题标题】：How to remove the border color from the drop down border-bottom?如何从下拉边框底部中删除边框颜色？
【发布时间】：2023-03-26 08:58:01
【问题描述】：

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

当我调试时发现它来自这个类 MuiInput-underline-2593

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

你们能告诉我如何解决它。以便将来我可以自己修复它。在下面提供我的相关代码sn-p和沙箱链接

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"
/>

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案1】：

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

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

【讨论】：

嘿，我在沙箱中更新了您的代码，但我仍然看到错误，当我将鼠标悬停在下拉菜单上时，我看到两个不同的边框，无论如何我可以删除这个边框底部：1px solid rgba (0, 0, 0, 0.42);完全，你能在我的沙箱中更新它吗？codesandbox.io/s/4x9lw9qrmx
我不熟悉你的库，它似乎为每个元素生成了一个动态类名并且你的元素没有我可以使用的静态类（也不明白如何添加一）
嘿，我查看了他们的 api 并应用了 disabled 但仍然无法正常工作，你能帮我吗，在这里提供 api 链接material-ui.com/api/select material-ui.com/api/input disableUnderline={true} disabled={true}

【解决方案2】：

基本上你可以删除它应该消失的整个 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"
        />

【讨论】：

嘿，我需要其中的一些 CSS，但是 CSS 类 MuiInput-underline-2593:before 来自框架。
大部分 CSS 仅用于正确显示该行。MuiInput-underline-2593:before is 那行。如果您添加border-bottom: 0，该行也将消失，就像在@Itay-gal 的答案中一样。

【解决方案3】：

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

【讨论】：