При вводе input меняет цвет

Question

Всем привет. При вводе текста, поле импута меняется с прозрачного на белый. Кусок взят с materializecss . Пишу на реакте. Мне кажется ответ где-то на поверхности, но я всю голову сломал уже. Код прилагаю, и скрины на всякий. Прошу камнями не кидаться, я новичок) заранее спасибо!

  <input
                        className='validate'
                        placeholder='search'
                        type='search'
                        value={this.state.search}
                        onChange={(e) =>
                            this.setState({ search: e.target.value })
                        }
                        onKeyDown={this.handleKey}
                    />

Answer 1

Это собственно не ответ, а пример того когда все работает, т.е. проблема не в указанном коде. Прошу камнями не кидаться, я не новичок) В комментарии такую демонстрацию не написать.

body{
  background-color: #2c5e82;
}
input.validate{
  background-color:transparent;
  color: white;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- Load our React component. -->
    <script type="text/babel">
      class MyInput extends React.Component {
         constructor(){
           super();
           this.state = { search: ""};
         }
         render(){
            return (
            <input
               className='validate'
               placeholder='search'
               type='search'
               value={this.state.search}
               onChange={(e) => this.setState({ search: e.target.value})}
               onKeyDown={this.handleKey}
             />
         )}
      }
      const App = () => {
        return (
          <MyInput/>
        );
      };

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

БЛОГ НА HUSL

При вводе input меняет цвет

Ответы (1 шт):