Измените цвет заполнителя TextInput с помощью стилизованных компонентов в React Native

Question

Как установить цвет TextInput для его заполнителя с Стилизованными компонентами в React Native ?

Я пробовал следующее без каких-либоудача:

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

Answer 1

Вы не можете стилизовать цвет заполнителя напрямую с помощью styleled-компонент, но вы можете передать свойство 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

Answer 2

Лучший способ сделать это:

export const Input = styled.TextInput.attrs({
  placeholderTextColor: "red"
})`
  background-color: "#000";
`;

Answer 3

Чтобы изменить цвет текста, ввод текста заполнителя пользователя prperty "PlaceholderTextColor" например,

<TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        placeholder = 'Enter text'
        placeholderTextColor = 'red'
        value={this.state.text}
      />