How to make MUI outlined Textfield label RTL?

Question

I use MUI v4 and I have an RTL theme (I put direction: 'rtl' inside the theme), and it works fine until I use an outlined TextField - for some reason the value itself is aligned RTL but the label is attached the top left position of the TextField.

How can I change that to be fully RTL?

Answer 1

You can use custom style

The text field uses the transform-origin and left properties to align the label by default.

If you are using styled-component you can use this code:

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",
},

});

Or rewrite it using class TextField like this :

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

}