Изменить цвет InputLabel Material UI

Question

У меня есть следующая метка ввода:

<InputLabel>NAME</InputLabel>

Моя проблема в том, что текст белый (я не понимаю, почему белый, возможно я что-то не так делаю), и я не вижу белого на белом. Как мне изменить цвет на черный?

Answer 1

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

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

Answer 2

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

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>
    }
}

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

Answer 3

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

Прочитайте 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.

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

CodeSandbox demo

Answer 4

Вы можете присвоить <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;
}

Answer 5

react.js

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

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

Answer 6

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

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

или

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

InputLabel{  
  color: black;
}