如何制作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;

}