설정 텍스트 입력 자리 색상

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 인라인을 사용할 수 없습니다.

비 - 표준 독점 ::-webkit-input-placeholder 의사 요소는 폼 요소의 자리 표시 자 텍스트를 나타냅니다

그것은 (예를 들어, :hover가 많은 등)에만 스타일 시트에서 사용할 수있는 의사 요소입니다. 대신 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)