Повторно используемый компонент поиска в реакции - css не удалось при переполнении текста

Question

Я создал поисковый компонент многократного использования, у меня возникли две проблемы:

• перекрытие текста поиска на значке svg - введите больше текста в поле ввода
• при вводе большего текста текстовый отступ не сохраняется - текст вводится слева при вводе дополнительного текста

Я добавил коды и поле

Answer 1

Для перекрывающегося текста на значке поиска я бы просто решил его, добавив некоторые отступы в поле ввода.

input{
  padding-right: 50px;
  box-sizing: border-box;
}

Чтобы отступы текста не оставались, пока поле ввода активно, я Я не уверен, как решить это в чистом виде. Вы можете добавить div с тем же цветом фона и шириной, что и отступ, а затем просто задать ему абсолютную позицию.

Обходной путь второго выпуска

Вместо использования текста -indent, мы можем использовать padding-left , и он будет работать правильно, пожалуйста, посмотрите этот SO

Answer 2

Это может помочь предотвратить наложение содержимого ввода на значок поиска.

.App {
  font-family: sans-serif;
}
.css-btdvqp {
  background:#e1e1e1;
  border-radius: 2px;
}
.css-btdvqp .css-vrkvd {
  width: 85%;
}