Set de saisie de texte de l'espace réservé de la couleur dans reactjs

Lors de l'utilisation ordinaire CSS si vous voulez style, votre place de titulaire vous utilisez ces sélecteurs css :

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

Mais je ne peux pas comprendre comment l'appliquer ces types de styles de réagir styles en ligne.

OriginalL'auteur Mohammad Razeghi | 2016-08-12

  1. 2

    Vous pouvez essayer d'utiliser 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'
  }
};
    cela ne fonctionne pas pour moi. btw, vous êtes absent un : sur votre '::-webkit-input-placeholder' objet json
    Ne fonctionne pas pour moi aussi

    OriginalL'auteur Sergio Flores

  2. 4

    Vous ne pouvez pas utiliser ::-webkit-inline-placeholder en ligne.

    C'est un pseudo-élément (comme par exemple :hover) ne peut être utilisé dans votre feuille de style:

    Le non-standard de propriété ::-webkit-input-placeholder pseudo-élément représente l'espace réservé de texte d'un élément de formulaire.

    Source

    Au lieu de cela, d'attribuer une classe à Réagir composant via le className de propriété et d'appliquer le style à cette classe.

    OriginalL'auteur Timo

  3. 0

    Pour moi, j'utilise Radium Style du composant. Voici ce que vous pouvez faire dans l'ES6 syntaxe:

    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)
    cela ne marche pas github.com/FormidableLabs/radium/issues/...

    OriginalL'auteur yonasstephen