在 React Native 中使用样式化组件更改 TextInput 占位符的颜色

Question

你如何在React Native 中使用Styled Components设置 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;
   }
`

Answer 1

最好的方法是：

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

Answer 2

你可以试试：

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

如何使用样式化组件设置输入占位符的样式？

Answer 3

添加@Fernando Pascoal Gomes 的答案，如果您希望访问该theme对象，请考虑传递一个函数.attrs()，该函数返回组件为其道具继承的对象。

对于您的情况，TextInput接受一个placeholderTextColor道具，因此它可能如下所示：

const Input = styled.TextInput.attrs((props) => ({
  placeholderTextColor: props.theme.palette.placeholderColor,
}))`
  background-color: #fff;
  color: #000;
  ...
`