如何使用反应js在选择字段中将颜色边框底部蓝线更改为绿绿线？答案

【问题标题】：How to change color border bottom blue line to green green line in select field using react js?如何使用反应js在选择字段中将颜色边框底部蓝线更改为绿绿线？
【发布时间】：2019-03-08 00:34:11
【问题描述】：

我正在使用来自material UI react的选择字段

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

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

这是我的代码 https://codesandbox.io/s/zqok7r3x63

<FormControl className={classes.formControl}>
          <InputLabel
            required
            htmlFor="age-native-simple"
            FormLabelClasses={{
              asterisk: classes.labelAsterisk,
              root: classes.labelRoot,
              focused: classes.focusedLabel
            }}
          >
            Role
          </InputLabel>
          <Select
            className=""
            native
            classes={{}}
            value={this.state.age}
            onChange={this.handleChange("age")}
            inputProps={{
              name: "age",
              id: "age-native-simple",
              classes: {
                root: classes.inputRoot,
                focused: classes.inputFocused,
                underline: classes.underlineInput
              }
            }}
          >
            <option value="" disabled />
            <option value={10}>Ten</option>
            <option value={20}>Twenty</option>
            <option value={30}>Thirty</option>
          </Select>
        </FormControl>

【问题讨论】：

标签： reactjs react-redux material-design material-ui

【解决方案1】：

使用原生 Select 时，有两个主要元素在起作用：Input 和原生 <select>。 Input 是您需要更改下划线的地方，但对于原生 Select，inputProps 将传递给原生 select 而不是 Input。在这种情况下，您可以通过input 属性自定义Input，然后将其提供给underline 类。您在聚焦时尝试更改的背景颜色用于 select，以便可以直接在 classes 属性中传递。

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

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`
    }
  }
};

          <Select
            native
            classes={{ select: classes.select }}
            value={this.state.age}
            onChange={this.handleChange("age")}
            input={
              <Input
                classes={{
                  root: classes.inputRoot,
                  focused: classes.focused,
                  disabled: classes.disabled,
                  error: classes.error,
                  underline: classes.underlineInput
                }}
              />
            }
            inputProps={{
              name: "age",
              id: "age-native-simple"
            }}
          >
            <option value="" disabled />
            <option value={10}>Ten</option>
            <option value={20}>Twenty</option>
            <option value={30}>Thirty</option>
          </Select>

【讨论】：

【解决方案2】：

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

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

更改课程

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

改变css

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

希望对你有帮助

【讨论】：