React-select, не может изменить цвет текста в заполнителе в текстовом поле
Попытка установить цвет значения выбора по умолчанию на черный, но это не работает, я даже поставил! Important, чтобы он переопределял любые цвета начальной загрузки, которые были перезаписаны им. Любая помощь приветствуется, спасибо.
const colourStyles = {
control: styles => ({ ...styles, overflow: 'hidden', color: 'black !important',backgroundColor: this.state.selectedOption.value || '#32CD32', fontSize: 23, paddingLeft: 'center', height:46}),
singleValue: styles => ({ ...styles, color: 'black' }),
}
<Select
onChange = {this.handleChangeEvent}
options = {optionsStatus}
styles = {colourStyles}
placeholder= 'Status'
/>
Ответы 4
Я тоже с этим столкнулся. Я все время пытался изменить ::placeholder в CSS, но, похоже, он отображается как настоящий текст, а не как псевдокласс. Вот что я обнаружил, что сработало. Сначала передайте компоненту опору classNamePrefix = "react-select", а затем выберите ее в CSS с помощью:
.react-select__placeholder {
color: black;
}
(И, конечно же, вы можете сделать classNamePrefix чем хотите).
Вы можете обновить стили заполнителей, используя тот же объект colourStyles.
const colourStyles = {
placeholder: (defaultStyles) => {
return {
...defaultStyles,
color: '#ffffff',
}
}
}
Вы можете просмотреть соответствующую документацию (https://react-select.com/styles#style-object), чтобы проверить ключи, доступные для стилизации.
Другой вариант - переопределить тему по умолчанию. Согласно документации реагировать-выбрать, нейтральный 50 ответ для цвета заполнителя. Например:
<Select
onChange = {this.handleChangeEvent}
options = {optionsStatus}
styles = {colourStyles}
placeholder= 'Status'
theme = {theme => ({
...theme,
colors: {
...theme.colors,
neutral50: '#1A1A1A', // Placeholder color
},
})}
/>
Посмотреть на коды
Если кто-то хочет изменить текст и стиль
<Select
options = {options}
placeholder = {<div className = "select-placeholder-text">Select category</div>}
/>
В таблице стилей
.select-placeholder-text {
color: pink;
}
Возможный дубликат Изменение цвета заполнителя ввода HTML5 с помощью CSS