当 body 有 dir = 'rtl' 时，Material UI 电话号码混乱答案

【问题标题】：Material UI Phone number is messed up when body has dir = 'rtl'当 body 有 dir = 'rtl' 时，Material UI 电话号码混乱
【发布时间】：2021-02-23 21:57:25
【问题描述】：

我有一个 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>

这里是codeandbox链接https://codesandbox.io/s/mui-phone-number-forked-cczzj?file=/src/CreateUserDialog.js

【问题讨论】：

标签： material-ui right-to-left

【解决方案1】：

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

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

【讨论】：

我添加了 input type=tel 看起来还不错codesandbox.io/s/mui-phone-number-forked-cczzj?file=/src/…
它在 614 周围添加括号，并用空格将其与其他括号分开。并且在从右到左的所有用空格分隔的单词都被反转了。我真的不知道它为什么要加上那个括号，也许是因为它是一部美国手机，我不太清楚。对于法国数字，它可以正常工作。