在reactjs中设置文本输入占位符颜色

Question

当使用普通CSS时，如果你想样式化你的占位符，你可以使用这些CSS选择器:

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

但是我不知道如何在react内联样式中应用这些类型的样式

Answer 1

只需给你的"input"标签一个"id"或"class"，并把你的css样式放在src内的App.css中。如

//App.css or external stylesheet
#inputID::placeholder {
    color: #ff0000;
    opacity: 1;
}
//your jsx code
<input type="text" id="inputID" placeholder="Your text here" />

Answer 2

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

这是一个伪元素，(很像:hover)只能在你的样式表中使用:

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

来源

相反，通过className属性为React组件分配一个类，并将样式应用于该类。

Answer 3

你可以试试镭

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 4

不要使用::-webkit-inline-placeholder inline和Radium作为一个占位符。

我建议去你的index.css

input.yourclassname::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

Answer 5

我的方法是根据值是否为空，简单地对整个<input />组件应用不同的样式。不需要安装新的依赖项，也不需要使用样式表，这似乎是最初问题的重点。

var inputStyles = {
    border: '1px solid #cbcbcb',
    color: '#525252',
};
var placeholderStyles = {
    ...inputStyles,
    color: '#999999',
};

<input
    type="text"
    placeholder="enter text here"
    value={myValue}
    style={myValue ? inputStyles : placeholderStyles}
/>

Answer 6

对于我来说，我使用Radium的Style组件。下面是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)

Answer 7

使用模板字量，即Backward quotes(``)来添加伪元素。

const inputFieldStyle = `
           .inputField::-webkit-input-placeholder{
                   color: red;
           }`

使用class是很重要的，所以要确保在伪元素之前使用class。

然后你可以在上面传递样式的地方使用标签，如下所示:

const reactFunctionalComponent = (props) => {
  ...
  return(
    <>
      <style>
        {inputFieldStyle}
      </style>
    ...
    </>
  )
}

Answer 8

这是一个在React中提供伪选择器功能的方法，不依赖于第三方库，大约20行代码。

这是RohitSawai的答案的扩展，它注入了一个<style>标签，但是以一种更封装和可重用的方式。

在你的项目中定义这个函数:

/** Returns a unique className and injectStyle function that can be used to 
style pseudo elements. Apply the className to the desired element and render 
injectStyle() nearby. The pseudo selector, e.g. ::-webkit-input-placeholder, 
will be appended to the unique className, styling a pseudo element directly, 
or a descendant pseudo element, as determined by the selector. */
const pseudo = (pseudoSelector, style) => {
  const className = `pseudo-${Math.floor(Math.random() * 1000000)}`
  // simple encoding of style dictionary to CSS
  // for simplicity, assumes that keys are already in slug case and units have 
  // been added, unlike React.CSSProperties
  const styleCSS =
    '{' +
    Object.entries(style)
      .map(([name, value]) => `${name}: ${value};`)
      .join('') +
    '}'
  return {
    className,
    injectStyle: () => (
      <style>
        {`.${className}${pseudoSelector} ${styleCSS}`}
      </style>
    )
  }
}

并像这样使用:

const MyComponent = () => {
  const placeholder = pseudo('::-webkit-input-placeholder', { color: 'red' })
  return (<div>
    {placeholder.injectStyle()}
    <input className={placeholder.className} placeholder="This placeholder is red" />
  </div>)
}