如何使 MUI 概述 Textfield 标签 RTL？

Question

我使用 MUI v4 并且我有一个 RTL 主题（我将 direction: 'rtl' 放在主题中），并且在我使用轮廓 TextField 之前它工作正常 - 出于某种原因，值本身是对齐 RTL 但标签附加在 TextField.

的 top left 位置

如何将其更改为完全 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",
},

});

或者像这样使用 class TextField 重写它：

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

}