How to change color border bottom blue line to green green line in select field using react js?

问题

I am using the select field from material UI react

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

Border bottom line become blue and background color become gray. I need to change Border bottom line to green and background color to white.

here is my code 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>

回答1:

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.

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>

回答2:

First, "Select" material-UI component only accepts root, select, filled, outlined, selectMenu, disabled, and icon on its classes attribute as stated in the docs, so there is no 'focused' and 'underline'.

Second, you can write your custom CSS the way you want and inject it to the appropriate class, for example, to make focused select background white :

change the classes

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

change the css

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

hope it helps

来源：https://stackoverflow.com/questions/55055047/how-to-change-color-border-bottom-blue-line-to-green-green-line-in-select-field

标签

reactjs

react-redux

material-design

material-ui