Измените цвет заполнителя TextInput с помощью Styled Components в React Native
Как вы устанавливаете цвет TextInput его заполнитель с Стилизованные компоненты в Реагировать на родной?
Я пробовал следующее без везения:
1.
const Input = styled.TextInput`
border: 1px solid green;
display: block;
margin: 0 0 1em;
::placeholder {
color: green;
}
`
2.
const Input = styled.TextInput`
border: 1px solid green;
display: block;
margin: 0 0 1em;
&::placeholder {
color: green;
}
`
Ответы 5
Чтобы изменить пользовательское свойство цвета текста заполнителя textinputs "заполнительтекстового цвета" например
<TextInput
style = {{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText = {(text) => this.setState({text})}
placeholder = 'Enter text'
placeholderTextColor = 'red'
value = {this.state.text}
/>
Вы не можете напрямую стилизовать цвет заполнителя с помощью styled-components, но вы можете передать свойство placeholderTextColor в ваш стилизованный Textinput.
Пример:
const Input = styled.TextInput`
border: 1px solid green;
display: block;
margin: 0 0 1em;
`
а затем внутри вашей функции рендеринга:
<Input placeholder = "hello" placeholderTextColor = "green" />
Выход:
Рабочий пример:
https://snack.expo.io/rybp-nKaE
@Wannes На самом деле это не задокументировано, но все, что связано с конкретными браузерами, не поддерживается. Как например ::placeholder и так далее
Лучший способ сделать это:
export const Input = styled.TextInput.attrs({
placeholderTextColor: "red"
})`
background-color: "#000";
`;
Это работает для меня, но я не могу получить доступ к объекту theme, чтобы получить цвета. жестко закодированные значения работают нормально.
@HaseebBurki попробуй color: ${themeColor};
можешь попробовать:
export const NewTodo = styled.input`
padding: 16px 16px 16px 60px;
font-weight: 300;
font-size: 15px;
::placeholder,
::-webkit-input-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
`;
В дополнение к ответу @Fernando Pascoal Gomes, если вы хотите получить доступ к объекту theme, рассмотрите возможность передачи функции .attrs(), которая возвращает объект, который компонент наследует для своих реквизитов.
В вашем случае TextInput принимает реквизит placeholderTextColor, поэтому это может выглядеть так:
const Input = styled.TextInput.attrs((props) => ({
placeholderTextColor: props.theme.palette.placeholderColor,
}))`
background-color: #fff;
color: #000;
...
`
Хорошо спасибо. Конечно, это не то, на что я надеялся. Как узнать, какие свойства возможны, а какие нет? Это где-то задокументировано?