Изменить цвет пользовательского интерфейса материала InputLabel

Вы можете указать style для тега ниже, как показано ниже;

 <InputLabel style = "color:black;">NAME</InputLabel>

или

Добавьте в CSS следующее для InputLabel и попробуйте:

InputLabel{  
  color: black;
}

react.js?

попробуйте использовать

const divStyle = {
  color: 'blue',
};
<InputLabel style = {divStyle} >NAME</InputLabel>

Вы можете присвоить <InputLabel /> имя класса:

<InputLabel classname = "test-label">This is a label</InputLabel>

В вашей таблице стилей:

.test-label: {
    color: #000000 !important;
}

Если вы пытаетесь стилизовать <InputLabel /> через компонент <TextField />

Вы можете присвоить <InputLabel /> класс, обратившись к <TextField /> InputLabelProps:

<TextField
   label = "This is a label"
   InputLabelProps = {{
     className: "test-label" 
   }}
/>

В вашей таблице стилей:

.test-label: {
    color: #000000 !important;
}

Используйте свойство withStyles и classes. Взгляните на раздел переопределение с классами и реализация компонента для более подробной информации.

Прочтите API InputLabel здесь.

Создайте необходимые стили

const styles = theme => ({
 
  cssLabel: {
    color:'blue',//required color
    
  },
  
  )}

Примените стили с помощью свойства FormLabelClasses.

<InputLabel
          FormLabelClasses = {{
            root: classes.cssLabel,
            focused: classes.cssFocused,
          }}
          htmlFor = "custom-css-input"
        >
          Custom CSS
        </InputLabel>

Не забудьте импортировать withStyles.

Обратитесь к Индивидуальный ввод в самой документации.

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

const styles = (theme: Theme) => createStyles({
    formText: {
        color: theme.palette.secondary.contrastText, 
        '&$formLabelFocused': {color: theme.palette.secondary.contrastText}
    },
    formLabelFocused: {
    }
})

class Example extends React.Component<>{
    public render() {
           <FormControl>
                    <InputLabel 
                        FormLabelClasses = {{                        
                            root: classes.formText,
                            focused: classes.formLabelFocused
                        }}
                    >
                        Currency
                    </InputLabel>
          </FormControl>
          <Select>
                    <MenuItem key = {1}>Example</MenuItem>
          </Select>
    }
}

Я боролся со многими вариантами этого, прежде чем найти правильный обходной путь

Пожалуйста, попробуйте это:

const divStyle = {
  color: 'blue',
};
<InputLabel style = {divStyle} >NAME</InputLabel>

Это сработало для меня

<TextField
   label = "This is a label"
   InputLabelProps = {{
     className: classes.formLabel 
   }}
/>

  formLabel: {
    color: '#000,
    '&.Mui-focused': {
      color: '#000
    }
  }

Как дела? После поиска ответа это было так просто, как

<Box>
          <TextField
            onChange = {handleChangeEvent("quantity")}
            label = "$ Quantity"
            variant = "filled"
            InputLabelProps = {{
              style: { color: "cadetblue" }
            }}
          />
        </Box>