设置文本输入占位符颜色

Question

当使用普通的CSS，如果你想你的风格占位符，你使用这些CSS选择：

::-webkit-input-placeholder { 
    color: red; 
} 

但我无法弄清楚如何应用这些类型的风格反应内联样式。

Answer 1

你可以尝试使用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' 
    } 
}; 

Answer 2

你不能使用内嵌的::-webkit-inline-placeholder。

它是一个伪元素（很像例如:hover）只能在样式表中被使用：

非标准专有::-webkit-input-placeholder伪元素表示的表格元素的占位符文本。

Source

相反，通过className属性分配类的阵营组件和样式应用于此类。

Answer 3

对于我来说，我使用Radium's Style component。这里是你可以在ES6语法中做什么：

import React, { Component } from 'react' 
import Radium, { Style } from 'radium' 

class Form extends Component { 
    render() { 
     return (<div> 
     <Style scopeSelector='.myClass' rules={{ 
      '::-webkit-input-placeholder': { 
       color: '#929498' 
      }}} /> 
     <input className='myClass' type='text' placeholder='type here' /> 
     </div> 
    } 
} 

export default Radium(Form)