Mui TextField 上的 RTL 使用特殊字符出错答案

【问题标题】：RTL on MuiTextField goes wrong using Special CharctersMui TextField 上的 RTL 使用特殊字符出错
【发布时间】：2022-01-11 17:05:45
【问题描述】：

我目前正在使用 Mui 进行一个项目，我已经使用 Mui 指南成功实现了 RTL。我遇到了一个烦人的问题，即 MuiTextField 上的特殊字符与左对齐而不是右对齐。

输入 secretpassword123 时！进入一个TextField的'！'字符向左移动。

example

      <TextField
        error={Boolean(formik.touched.password && formik.errors.password)}
        fullWidth
        helperText={formik.touched.password && formik.errors.password}
        label={t("password")}
        margin="dense"
        name="password"
        onBlur={formik.handleBlur && handlePasswordFieldBlur}
        onFocus={handlePasswordFieldFocus}
        onChange={formik.handleChange}
        type={isPasswordVisible ? "text" : "password"}
        value={formik.values.password}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <IconButton onClick={handleVisibilityIconClick}>
                {isPasswordVisible ? <Visibility /> : <VisibilityOff />}
              </IconButton>
            </InputAdornment>
          ),
        }}
      />

我注意到很多人都面临同样的问题，但解决方案并不适合我的情况。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

这是 RTL 的标准行为。这是在谷歌的 IL 网站中输入的相同密码。这不是错误，而是一项功能，这是 RTL 用户在所有其他应用程序/网站中输入拉丁文本时所习惯的。

要为每个 docs 覆盖一个 TextField，您可以执行以下操作：

import { styled } from '@mui/material';

const LtrInput = styled("input")`
  /* @noflip */
  direction: ltr;
`;

<TextField
  InputProps={{ inputComponent: LtrInput }}
  label={"Test"}
  sx={{ "& .MuiInputBase-input": { textAlign: "end" } }}
/>

【讨论】：

是的，我想覆盖标准，因为它可能会让用户感到困惑。
它不会让 RTL 用户感到困惑，因为任何 RTL 用户都希望 RTL 字段中的文本是 RTL - 意思是从右到左。所以很自然，打字会朝那个方向，因此它按预期在最左边。这就是每个以色列银行网站上用户必须填写密码字段的密码字段的方式（并且密码可能是希伯来语短语而不是拉丁语短语）。如果您只想覆盖该字段（同样，这对于本机 RTL 用户来说会很奇怪），请继续并仅覆盖该组件））
我添加了一个示例，说明如何在我的答案中仅覆盖一个 TextField。希望对您有所帮助。
使用你的例子我解决了这个问题，谢谢！如果可以的话，我真的很想了解 & 是如何工作的。 sx={{ "& .MuiInputBase-input": { textAlign: "end" } }}
这里是覆盖嵌套组件样式的docs :)

【解决方案2】：

使用@Sam A. 建议我已将道具添加到 TextField 中

    dir: "ltr",
    sx: { "& .MuiInputBase-input": { textAlign: "end" } }

它解决了这个问题:)

全码

      <TextField
        error={Boolean(formik.touched.password && formik.errors.password)}
        fullWidth
        helperText={formik.touched.password && formik.errors.password}
        label={t("password")}
        margin="dense"
        name="password"
        onBlur={formik.handleBlur && handlePasswordFieldBlur}
        onFocus={handlePasswordFieldFocus}
        onChange={formik.handleChange}
        type={isPasswordVisible ? "text" : "password"}
        value={formik.values.password}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <IconButton onClick={handleVisibilityIconClick}>
                {isPasswordVisible ? <Visibility /> : <VisibilityOff />}
              </IconButton>
            </InputAdornment>
          ),
          dir: "ltr",
          sx: { "& .MuiInputBase-input": { textAlign: "end" } },
        }}
      />

result

【讨论】：