如何解决当 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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。