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

时间:2019-05-27 17:10:01

标签: react-native 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 个答案:

答案 0 :(得分:1)

您不能直接使用样式化组件来对占位符颜色进行样式化,但是可以将placeholderTextColor属性传递给样式化的Textinput。

示例:

const Input = styled.TextInput`
   border: 1px solid green;
   display: block;
   margin: 0 0 1em;

`

,然后在您的渲染函数中:

<Input placeholder="hello" placeholderTextColor="green" />

输出:

output

工作示例:

https://snack.expo.io/rybp-nKaE

答案 1 :(得分:1)

做到这一点的最佳方法:

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

答案 2 :(得分:1)

你可以试试:

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

How do I style an input placeholder with Styled Components?

答案 3 :(得分:0)

要更改textinputs占位符的文本颜色用户属性 “ placeholderTextColor” 例如

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

答案 4 :(得分:0)

补充@Fernando Pascoal Gomes 的回答,如果您希望访问 theme 对象,请考虑将函数传递给 .attrs(),该函数返回组件为其道具继承的对象。

对于您的情况,TextInput 接受 placeholderTextColor 道具,因此它可能如下所示:

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