Как изменить цветовую границу нижней синей линии на зеленую зеленую линию в поле выбора, используя ответ js? - PullRequest
Новая
       28

Как изменить цветовую границу нижней синей линии на зеленую зеленую линию в поле выбора, используя ответ js?

1 голос
/ 08 марта 2019

Я использую поле выбора из Пользовательский интерфейс материала реагирует

Когда я выбираю любой элемент из поля, я сталкиваюсь с двумя проблемами:

  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>

c

Ответы [ 2 ]

0 голосов
/ 08 марта 2019

При использовании нативного выбора в игре есть два основных элемента: Input и нативный <select>. Input - это то, что вам нужно, чтобы изменить подчеркивание, но для нативного выбора. inputProps передается нативному select, а не Input. В этом случае вы можете настроить Input через свойство input, а затем предоставить ему класс underline. Цвет фона, который вы пытаетесь изменить, когда сфокусирован, предназначен для select, поэтому его можно передать непосредственно в свойство classes.

Ниже приведены стили и код для выбора и обновленная версия вашей песочницы. В моем примере я использовал три разных цвета для подчеркивания для разных состояний, чтобы вы могли легко увидеть эффект, но вы можете изменить все / любые из них на свой предпочитаемый оттенок зеленого. 

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>

Edit Native Select custom underline

0 голосов
/ 08 марта 2019

Во-первых, компонент «Выбрать» материала-пользовательского интерфейса принимает только корень, выбранный, заполненный, выделенный, selectMenu, отключенный и значок в своем атрибуте классов, как указано в документации, поэтому нет «сфокусированного» и «подчеркивания».

Во-вторых, вы можете написать свой собственный CSS-код так, как вы хотите, и добавить его в соответствующий класс, например, чтобы сделать выделенный фон белым цветом:

изменить классы 

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

изменить css 

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

надеюсь, это поможет

...