Заполнитель текстовой области странный пробел (reactjs)

#html #css #reactjs #textarea

#HTML #css #reactjs #текстовая область

Вопрос:

Я использую простой textarea элемент и добавляю a placeholder , и по какой-то причине у заполнителя есть странный пробел сбоку. Код находится в React.js:

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: направление моей структуры HTML DOM таково RTL !

 <textarea
    className='inputArea'
    {...passProps}
/>

Со следующим стилем CSS (SASS):

 .inputArea
    display: block
    width: 100%
    padding: 1rem
    overflow-y: scroll
    height: 160px

И вот как это выглядит: (с пробелом)

Вы можете видеть пробел между заголовком и текстом-заполнителем. Но когда я устанавливаю dir='ltr' пробел, он исчезает:

Также нужно знать, что при установке overflow-y: hidden пробел исчезает..

В чем, по-видимому, проблема?

1. Проверьте DOM и просмотрите все вычисленные значения стиля, чтобы увидеть, что может добавлять это дополнение / поле / пробел для любого из этих элементов.

2. это происходит из-за прокрутки, которая занимает 6px ширину, но я не понимаю, почему .. ?

3. Если я установлю overflow-y значение auto , как оно будет прокручиваться?

4. Вы проверили все элементы в текстовой области, чтобы увидеть, какие правила CSS применяются? rtl Направление также меняет выравнивание текста ввода или текст по-прежнему выровнен по левому краю? Я все еще думаю overflow-y: auto; , что это поможет, поскольку полоса прокрутки будет отображаться только в случае переполнения содержимого.

5. Вы правы ! @DrewReese

Ответ №1:

Текстовая область должна быть написана следующим образом

 <textarea className='inputArea' {...passProps} />

И вам нужно убрать пробел между началом и концом тега

1. Ваше предложение полностью самоуверенно и абсолютно на 100% не единственный способ написать синтаксически правильный JSX. Некоторые форматеры стилей могут быть настроены так, чтобы разрешать только один реквизит на строку, чтобы в будущем можно было легко обновлять однострочные обновления (например, git blame).