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

【问题标题】：Set text input placeholder color in reactjs在 reactjs 中设置文本输入占位符颜色
【发布时间】：2016-12-19 18:11:26
【问题描述】：

在使用普通 CSS 时，如果您想为占位符设置样式，请使用这些 CSS 选择器：

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

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

【问题讨论】：

标签： reactjs styles placeholder

【解决方案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" />

这实际上对我有用。

【讨论】：

这与 OP 已经做的没有什么不同。他在问如何使用内联 HTML 来做到这一点

【解决方案2】：

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

这是一个伪元素（很像 :hover）只能在你的样式表中使用：

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

Source

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

【讨论】：

在不创建 css 文件的情况下使用伪元素的替代方法。检查这个答案 - stackoverflow.com/a/70480538/9282474

【解决方案3】：

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

我建议去你的 index.css

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

【讨论】：

【解决方案4】：

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

【讨论】：

这对我不起作用。顺便说一句，您的 '::-webkit-input-placeholder' json 对象上缺少 :
无需镭包。你可以不做就做到这一点。检查这个答案 - stackoverflow.com/questions/70471012/…

【解决方案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}
/>

【讨论】：

但是color 样式不会改变输入占位符的颜色...
@Yairopro，在我发布此示例时，此示例对我有用。我会引用这些似乎证实color 属性是正确的资源：@987654321@ 和css-tricks.com/almanac/selectors/p/placeholder

【解决方案6】：

对我来说，我使用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)

【讨论】：

这也不起作用github.com/FormidableLabs/radium/issues/…

【解决方案7】：

使用Template Literals 即Backward quotes(``) 添加您的伪元素。

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

使用class 很重要，因此请确保在伪元素之前使用类。

然后您可以在传递上述样式的地方使用标签，如下所示：

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

【讨论】：