設置文本輸入佔位符顏色

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)