Reactjs 如何使用react js将选择字段中的颜色边框底部蓝线更改为绿绿线？

我正在使用中的选择字段

当我从字段中选择任何项目时，我面临两个问题：

边框底线变为蓝色，背景色变为灰色。我需要将边框底线更改为绿色，背景色更改为白色

这是我的密码

角色
十
二十
三十

首先，“选择”材质UI组件只接受文档中所述的根、选择、填充、轮廓、选择菜单、禁用和类别属性上的图标，因此没有“聚焦”和“下划线”

其次，您可以按照自己的方式编写自定义CSS，并将其注入适当的类中，例如，使聚焦选择背景为白色：

换班

classes: {
            root: classes.inputRoot,
            select: classes.inputFocused
          }

更改css

  inputFocused: {
    "&:focus": {
    backgroundColor: "white"}
  },

希望对您有所帮助。

首先，“选择”材质UI组件只接受文档中所述的root、Select、filled、outlined、selectMenu、disabled和classes属性上的图标，因此没有“focused”和“underline”

其次，您可以按照自己的方式编写自定义CSS，并将其注入适当的类中，例如，使聚焦选择背景为白色：

换班

classes: {
            root: classes.inputRoot,
            select: classes.inputFocused
          }

更改css

  inputFocused: {
    "&:focus": {
    backgroundColor: "white"}
  },

---

希望对您有所帮助

在使用本机选择时，有两个主要元素在起作用：一个是和一个本机

。

输入

是您需要更改下划线的地方，但是对于原生选择，将

输入属性

传递给原生选择，而不是

输入

。在这种情况下，您可以通过

Input

属性自定义

Input

，然后为其提供

underline

类。聚焦时您试图更改的背景色是针对

选择的

，以便可以直接在

类

属性中传递

下面是选择和更新版本的沙盒的样式和代码。在我的示例中，我为不同状态的下划线使用了三种不同的颜色，因此您可以很容易地看到效果，但您可以将所有/任何颜色更改为您喜欢的绿色

const styles = {
  focused: {},
  disabled: {},
  error: {},
  select: {
    "&:focus": {
      backgroundColor: "white"
    }
  },
  underlineInput: {
    "&:before": {
      // normal
      borderBottom: "1px solid #00ff00"
    },
    "&:after": {
      // focused
      borderBottom: `2px solid #ff0000`
    },
    "&:hover:not($disabled):not($focused):not($error):before": {
      // hover
      borderBottom: `2px solid #0000ff`
    }
  }
};

十
二十
三十

---

使用本机选择时，有两个主要元素在起作用：一个和一个本机

。

输入

是您需要更改下划线的地方，但是对于原生选择，将

输入属性

传递给原生选择，而不是

输入

。在这种情况下，您可以通过

Input

属性自定义

Input

，然后为其提供

underline

类。聚焦时您试图更改的背景色是针对

选择的

，以便可以直接在

类

属性中传递

下面是选择和更新版本的沙盒的样式和代码。在我的示例中，我为不同状态的下划线使用了三种不同的颜色，因此您可以很容易地看到效果，但您可以将所有/任何颜色更改为您喜欢的绿色

const styles = {
  focused: {},
  disabled: {},
  error: {},
  select: {
    "&:focus": {
      backgroundColor: "white"
    }
  },
  underlineInput: {
    "&:before": {
      // normal
      borderBottom: "1px solid #00ff00"
    },
    "&:after": {
      // focused
      borderBottom: `2px solid #ff0000`
    },
    "&:hover:not($disabled):not($focused):not($error):before": {
      // hover
      borderBottom: `2px solid #0000ff`
    }
  }
};

十
二十
三十