如何制作MUI轮廓Textfield标签RTL？

Question

我使用 MUI v4 并且有一个 RTL 主题（我将

direction: 'rtl'

放在主题内），它工作正常，直到我使用概述的

TextField

- 由于某种原因，值本身与 RTL 对齐，但标签附加在

top left

TextField

的位置。

如何将其更改为完全 RTL？

Answer 1

您可以使用自定义样式

文本字段默认使用 transform-origin 和 left 属性来对齐标签。

如果您使用样式组件，您可以使用以下代码：

export const custom TextField = styled(TextField)({
'& label': {
    transformOrigin: "right !important",
    left: "inherit !important",
    right: "1.75rem !important",
    fontSize: "small",
    color: "#807D7B",
    fontWeight: 400,
    overflow: "unset",
},

});

或者使用类 TextField 重写它，如下所示：

.css-1kty9di-MuiFormLabel-root-MuiInputLabel-root{
left: inherit !important;
right: 1.75rem !important;
transform-origin: right !important;

}

Answer 2

什么对我有用：

• 打开你的 globals.css 文件
• 添加此代码：

.custom-label-rtl {
    left: inherit !important;
    right: 1.75rem !important;
    transform-origin: right !important;
  }
  .custom-label-rtl + .MuiOutlinedInput-root fieldset {
    text-align: right;
  }

• 同时添加提到的属性：

<TextField
                  fullWidth
                  label={t('name')}
                  variant="outlined"
                  required
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  InputLabelProps={{
                    className: isArabic ? 'custom-label-rtl' : ''
                  }}
                />
- good luck