如何使 MUI 概述 Textfield 标签 RTL？

【问题标题】：How to make MUI outlined Textfield label RTL?如何使 MUI 概述 Textfield 标签 RTL？
【发布时间】：2021-12-27 13:57:55
【问题描述】：

我使用 MUI v4 并且我有一个 RTL 主题（我将 direction: 'rtl' 放在主题中），它可以正常工作，直到我使用概述的 TextField - 出于某种原因，值本身与 RTL 对齐，但标签是附上TextField的top left位置。

如何将其更改为完全 RTL？

【问题讨论】：

标签： reactjs material-ui textfield right-to-left theming

【解决方案1】：

您可以使用自定义样式

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

如果您使用的是 styled-component，您可以使用以下代码：

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;

}

【讨论】：

工作就像一个魅力！非常感谢！