Как изменить цвет метки в текстовом поле Material-UI после пользовательского завершения редактирования - PullRequest
Новая
       14

Как изменить цвет метки в текстовом поле Material-UI после пользовательского завершения редактирования

0 голосов
/ 10 ноября 2019

Я потратил много времени, чтобы изменить цвет надписи, когда пользователь закончит писать. С помощью документов на веб-сайте я могу изменить цвет контура, но не цвет надписи

Iпытался использовать ту же идею Документов на сайте

, но она не работает 

inputRoot: {
   fontSize: 20,
   "&$cssFocused $notchedOutline": {
     borderColor: "#07a0a9"
   },
   "&:hover:not($disabled):not($cssFocused):not($error) $notchedOutline": {
     borderColor: "#000000"
   },
   "& input:valid + fieldset": {
     borderColor: "#808080",
     borderWidth: 2,
     borderLeftWidth: 6,
     padding: "4px !important" // override inline-style
   },
   "& input:invalid + fieldset": {
     borderWidth: 1
   },
   "& input:valid:focus + fieldset": {
     borderLeftWidth: 6,
     padding: "4px !important" // override inline-style
   }
 },
 cssFocused: {},
 notchedOutline: {},

//Here Is where I think I have to insert some code for the label color when the user finish editing

 label: {
   fontSize: 21,
   "&$focused": {
     color: "#808080"
   }
 }

<TextField
                       fullWidth
                       id="outlined-basic"
                       required
                       className={classes.textFieldName}
                       InputProps={{
                         classes: {
                           root: classes.inputRoot,

                           focused: classes.cssFocused,
                           notchedOutline: classes.notchedOutline
                         }
                       }}
                       InputLabelProps={{
                         classes: {
                           root: classes.label,
                           focused: classes.focused,
                           asterisk: classes.asterisk
                         }
                       }}
                       label="Name"
                       margin="normal"
                       variant="outlined"
                     />
...