Изменить цвет Material-UI TextField, когда не в фокусе - PullRequest
Новая
       17

Изменить цвет Material-UI TextField, когда не в фокусе

0 голосов
/ 25 июня 2019

У меня есть это TextField ниже, которое работает как задумано, и я хочу изменить цвет метки, когда она не в фокусе, потому что, когда она в данный момент не в фокусе, она остается черной.

Кто-нибудь может мне помочь, как мне этого добиться? 

const useStyles = makeStyles(theme => ({
  textField: {
    width: "300px"
  },
  cssLabel: {
    color: "white"
  },
  cssOutlinedInput: {
    "&$cssFocused $notchedOutline": {
      borderColor: `white !important`
    }
  },
  cssFocused: { color: "white !important" },

  notchedOutline: {
    borderWidth: "1px",
    borderColor: "white !important"
  }
}));

<TextField
  id="username"
  label="Username"
  className={classes.textField}
  variant="outlined"
  required={true}
  InputLabelProps={{
    classes: {
      root: classes.cssLabel,
      focused: classes.cssFocused
    }
  }}
  InputProps={{
    classes: {
      root: classes.cssOutlinedInput,
      focused: classes.cssFocused,
      notchedOutline: classes.notchedOutline
    }
  }}
/>;

1 Ответ

0 голосов
/ 25 июня 2019

Также установите цвет по умолчанию корневых стилей на белый. 

const useStyles = makeStyles(theme => ({
  textField: {
    width: "300px"
  },
  cssLabel: {
    color: "white"
  },
  cssOutlinedInput: {
    color: 'white',   // <!-- ADD THIS ONE
    "&$cssFocused $notchedOutline": {
      borderColor: `white !important`
    }
  },
  cssFocused: { color: "white !important" },

  notchedOutline: {
    borderWidth: "1px",
    borderColor: "white !important"
  }
}));
...