Textarea占位符奇怪的差距（reactjs）答案

【问题标题】：Textarea placeholder weird gap (reactjs)Textarea占位符奇怪的差距（reactjs）
【发布时间】：2020-10-04 18:00:18
【问题描述】：

我使用了一个简单的textarea 元素并添加了一个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时，差距就消失了..

似乎是什么问题？

【问题讨论】：

检查 DOM 并查看 all 计算的样式值，以查看可能为任何这些元素添加填充/边距/空间的内容。
这是因为滚动占用了6px 的宽度，但我不明白为什么......？
如果我将overflow-y 设置为auto，它将如何滚动？
您是否检查了文本区域中的所有元素以查看应用了哪些 CSS 规则？ rtl 方向是否也会翻转输入文本的对齐方式，还是文本仍然左对齐？我仍然认为overflow-y: auto; 会有所帮助，因为滚动条只会在内容溢出时显示。
你是对的！ @DrewReese

【解决方案1】：

Textarea应该这样写

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

你需要删除标签开始和结束之间的空间

【讨论】：

您的建议完全是固执己见，绝对 100% 不是编写语法正确的 JSX 的唯一方法。某些样式格式化程序可以配置为每行只允许一个道具，以便将来轻松进行单行更新（即 git blame）。