在使用普通CSS时,如果您要为占位符设置样式,请使用以下CSS选择器:
::-webkit-input-placeholder { color: red; }
但是我不知道如何在响应内联样式中应用这些类型的样式。
您可以尝试使用镭
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' } };