当 body 有 dir = 'rtl' 时，Material UI 电话号码搞砸了

问题描述

我有一个 Material UI 电话号码，当我的网站显示 RTL 时，电话号码会自动对齐，但号码也被弄乱了。如何确保号码保持原样？

  <div open={this.props.open} onClose={this.props.onClose} dir="rtl">
        <DialogTitle title="New User" />
        This text will be RTL led !
        <div>
          <Typography component="label">'Phone Number'</Typography>
          <MuiPhoneNumber
            name="phone"
            data-cy="user-phone"
            defaultCountry={"us"}
            value={this.state.phone}
            value="1(937)-123-4567"
            onChange={this.handlePhoneChange}
          />
          <p>614-764-6300</p>{" "}
          {/* number is right aligned but number stays the same which is how it should be*/}
        </div>
      </div>

这是代码和框链接https://codesandbox.io/s/mui-phone-number-forked-cczzj?file=/src/CreateUserDialog.js

解决方法

我在任何带有 type="tel" 的 HTML 输入元素上得到相同的行为，并且带有 dir="rtl"。

如果你想保持该字段从左到右，你可以给它一个属性 inputProps={{dir: "ltr"}} 并使用一些 CSS 使文本向右对齐 text-align: right;