在reactjs中设置文本输入的占位符颜色 [英] Set text input placeholder color in reactjs
本文介绍了在reactjs中设置文本输入的占位符颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在使用普通CSS时,如果要为占位符设置样式,请使用以下CSS选择器:
When using ordinary CSS if you want to style your place holder you use these css selectors :
::-webkit-input-placeholder {
color: red;
}
但是我不知道如何在反应内联样式中应用这些类型的样式.
But I can't figure out how to apply these type of styles in react inline styles.
推荐答案
您可以尝试使用 radium
var Radium = require('radium');
var React = require('react');
var color = require('color');
@Radium
class Button extends React.Component {
static propTypes = {
kind: React.PropTypes.oneOf(['primary', 'warning']).isRequired
};
render() {
// Radium extends the style attribute to accept an array. It will merge
// the styles in order. We use this feature here to apply the primary
// or warning styles depending on the value of the `kind` prop. Since its
// all just JavaScript, you can use whatever logic you want to decide which
// styles are applied (props, state, context, etc).
return (
<button
style={[
styles.base,
styles[this.props.kind]
]}>
{this.props.children}
</button>
);
}
}
// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
base: {
color: '#fff',
// Adding interactive state couldn't be easier! Add a special key to your
// style object (:hover, :focus, :active, or @media) with the additional rules.
':hover': {
background: color('#0074d9').lighten(0.2).hexString()
},
'::-webkit-input-placeholder' {
color: red;
}
},
primary: {
background: '#0074D9'
},
warning: {
background: '#FF4136'
}
};
这篇关于在reactjs中设置文本输入的占位符颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文