文本输入颜色等于React应用中的占位符颜色

Question

为什么输入元素的文本颜色等于Chromium 69.0.3497.81中的占位符颜色？ Example

没有定义绿色文本输入颜色的CSS规则。

在Firefox中，颜色是正确的。

class MyInput extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      inputInUse: false,
      value: ''
    };
  }
  
  handleChange = (e) => {
    let value = e.target.value;
    this.setState({ 
      inputInUse: value !== '',
      value: value
    });
  }

  handleFocus = (e) => {
    this.setState({ inputInUse: true });
  }

  render() {

    return (
        <input
          type="text"
          className="myInput"
          value={this.state.value}
          placeholder={ this.state.inputInUse ? '' : 'type' }
          onChange={this.handleChange}
          onFocus={this.handleFocus}
        />
    )
  }
}

ReactDOM.render(<MyInput />, document.querySelector('#root'));

.myInput {
	border: 1px solid green;
	padding: 5px 8px;
	border-radius: 4px;
	font-size:22px;
	width: 200px;
}

.myInput::placeholder {
	color: green;
}

.myInput:placeholder-shown {
	color: green;
	font-size:18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

我知道有更好的解决方案。但是我不清楚浏览器的行为。

1. 我使用外部样式表为输入元素定义占位符颜色
2. 我在React组件中渲染输入元素
3. 输入的占位符属性基于该组件的本地状态