如何调整Material-UI React输入框中占位文本的位置？

问题原因 #

你给外层Box设置了direction: "rtl"，这会触发Material-UI的RTL布局规则，导致输入组件的标签和文本默认靠右对齐，看起来像是“占位文本在末尾”。

解决方案 #

方案1：通过Material-UI组件Props单独调整 #

针对单个输入组件，直接修改其内部输入元素的文本方向，不影响其他RTL元素：

处理Select组件

<Select
  style={{ width: "300px" }}
  labelId="period-filter-label"
  id="period-filter"
  value=""
  label="מיין לפי תקופה"
  onChange={(event) => {}}
  // 添加InputProps重置方向和对齐
  InputProps={{
    sx: {
      direction: "ltr",
      textAlign: "left"
    }
  }}
>
  {periods.map((item, key) => (
    <MenuItem key={key} value={item?.key}>
      {item.value}
    </MenuItem>
  ))}
</Select>

处理Input组件

<Input
  id="interest-type"
  type="number"
  value=""
  onChange={(event) => {}}
  // 直接设置sx样式
  sx={{
    direction: "ltr",
    textAlign: "left"
  }}
/>

方案2：自定义CSS批量处理 #

如果需要调整多个组件，创建全局CSS类后通过className传入：

.ltr-input-container {
  direction: ltr !important;
  text-align: left !important;
}

在组件中使用：

<Select className="ltr-input-container" {/* 其他属性 */} />
<Input className="ltr-input-container" {/* 其他属性 */} />

使用!important是为了确保覆盖Material-UI自带的RTL样式优先级。

方案3：调整容器样式（不推荐） #

若想一次性修改容器内所有元素，可调整Box的textAlign，但可能影响其他RTL文本的布局：

<Box sx={{ direction: "rtl", textAlign: "left" }}>
  {/* 原有组件内容 */}
</Box>

效果说明 #

修改后，输入组件的标签和输入区域文本会靠左对齐，满足“占位文本在开头”的需求，同时保留其他元素的RTL布局。

内容的提问来源于stack exchange，提问作者Moshe Fortgang