Как создать анимированый input как у material ui?

Question

[Alexander]

Здравствуйте, подскажите пожалуйска как создать анимированый input на чистом react и css или styled-component как у material ui, а именно outlined вариант?
Буду благодарен за ответ

Comments

[Владимир Проскурин]

Предлагаю вам через девтулзы залезть в html разметку этого элемента, и проверить, что происходит во время фокуса. Все элементарно делается, главное идея.
Там фокус считается не как :focus, а по JS на событие фокуса добавляется класс, поэтому не совсем удобно через девтулзы смотреть на css свойства, т.к. при фокусе в девтулзы, фокус в поле ввода пропадет. Просто поставьте breakpoint на изменение атрибутов поля, и выполнение страницы будет останавливаться

[Exploding]

Владимир Проскурин, возможно будет полезно: там в девтулз сверху в табе styles, правее поля filter, есть две ссылки :hov и .cls
Если ткнуть на :hov - появится список из чекбоксов Force element state, в котором можно выбрать какие псевдоклассы вы хотите применить к текущему элементу (:hover, :active, :focus и т.д., всего 8). При этом элемент будет например в :hover всё время до перезагрузки страницы или пока на убрать установленный чекбокс

[Владимир Проскурин]

Exploding, а это уже CSS псевдоклассы, они не помогут, т.к. стили в этом компоненте применяются через добавленный класс по событию onFocus/onBlur а не нативно через псевдоклассы.
Сколько уже работаю в фронтенде, так и не понял, почему так делают разрабы (разве что тестировать удобнее).

[Exploding]

Владимир Проскурин, лично я стараюсь подобные штуки реализовывать с использованием именно псевдоклассов и меньше задействовать js, если позволяет возможность, особенно как в данном примере, однако сталкивался подобным случаем и уже было хотел воротить эту гору из обработчиков событий, добавлением/удалением классов, но обошлось...
А проблема была в следующем: когда инпут пустой - всё нормально работает, но если туда вписать текст (например поле поиска), то при потере фокуса, поле принимает соответствующий вид)))) Псевдоклассов для отслеживания пустого поля нет, поэтому вроде бы извернулся с помощью селекторов по атрибутам, на сколько помню.
Это я к тому, почему многие используют не псевдоклассы, а добавляют/удаляют классы с помощью js