React 使用 React 内联样式更改占位符文本颜色答案

【问题标题】：React change placeholder text color using React inline stylingReact 使用 React 内联样式更改占位符文本颜色
【发布时间】：2018-04-10 16:15:44
【问题描述】：

如何使用 React 内联样式更改占位符文本颜色？我正在使用以下输入样式：

input: {
      width: '100%',
      height: '100%',
      backgroundColor: 'white',
      border: '0px',
      float: 'left',
      paddingLeft: '30px',
      ...
}

【问题讨论】：

可能重复 Change an HTML5 input's placeholder color with CSS.
Set text input placeholder color in reactjs的可能重复
“可能重复”的链接都没有回答我的问题。我正在尝试使用 React 内联样式在纯 React 中执行此操作，但我不想使用 Radium。
@foobar 您不能使用 React 内联样式更改伪元素样式。您要么必须使用第三方库（例如 Radium），要么将 className 添加到您的 input 并通过 CSS 文件将其设置为伪元素。
@Swordys，谢谢你的回答，并为这个问题道歉

标签： css reactjs

【解决方案1】：

选择器和类名之间只有一个空格，所以我必须这样做才能实现。

请参考这个，https://github.com/FormidableLabs/radium/issues/712

        <Style
            scopeSelector=""
            rules={{
                '.textfield-input::placeholder': { /* Chrome, Firefox, Opera, Safari 10.1+ */
                    color: 'red',
                    opacity: 1 /* Firefox */
                },

                '.textfield-input:-ms-input-placeholder': { /* Internet Explorer 10-11 */
                    color: 'red',
                },

                '.textfield-input::-ms-input-placeholder': { /* Microsoft Edge */
                    color: 'red',
                }
            }}
        />

【讨论】：