исправить ширину метки, чтобы правильно использовать контурный ввод

Question

Я просто пытаюсь использовать a с длинным ярлыком, но когда он становится слишком длинным, он пересекает черту, несмотря на наличие места для слова.

https://codesandbox.io/s/reverent-bhabha-i736y

в общем, похоже, что он не рассчитывается должным образом, поэтому я хочу вычислить его вручную, я пытался использовать ссылку ref, но он не работает.

редактирование:

точнее, давайте предположим, что наш ярлык I want to do this right, верно? это будет выглядеть так:

---I want to do         -----
|   this right              |
-----------------------------

обратите внимание на оставшееся место, это не правильно.

когда это должно быть:

-- I want to do this right ------
|                               |
---------------------------------

Насколько я видел, у метки есть место, но по некоторым причинам она ломает черту. обратите внимание, что это проблема с outlined TextFields

Answer 1

Ваша проблема

transform: translate(14px, -6px) scale(0.75);

transform работает после того, как элемент был рассчитан и помещен в DOM. Если вы удалите scale(0.75), вы увидите, что ваш элемент занимает все доступное пространство.

Как исправить:

удалите transform: translate(14px, -6px) scale(0.75); и добавьте этот код вместо

.MuiInputLabel-outlined.MuiInputLabel-shrink {
    transform: translate(0, -6px);
    font-size: 12px;
    margin: 0 14px;
    background-color: white;
}