如何使用React JS在选择字段中将颜色边框的底部蓝色线更改为绿色绿色线? [英] How to change color border bottom blue line to green green line in select field using react js?

问题描述

我正在使用材料UI反应

当我从字段中选择任何项目时，我会遇到两个问题:

When I select any item from the field I face two issues:

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

这是我的代码 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>

推荐答案

使用本地Select时，有两个主要元素在起作用:

When using the native Select, there are two main elements in play: an Input and a native <select>. The Input is what you need to change the underline on, but for a native Select the inputProps are passed to the native select and not the Input. You can customize the Input in this case via the input property and then provide it with the underline class. The background color you are trying to change when focused is for the select so that can be passed directly in the classes property.

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

Below are the styles and code for the Select and an updated version of your sandbox. In my example I used three different colors for the underline for the different states so you can easily see the effect, but you can change all/any of these to your preferred shade of green.

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>

这篇关于如何使用React JS在选择字段中将颜色边框的底部蓝色线更改为绿色绿色线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！