'Place material ui Text filed label on the top right of the Border instead of the left

Hi i am trying to make a textfiled for Arabic Text as the Arabic text is positioned form right to left there for i also want to place the label at to top right corner but not able to do that The styling i am applying is

const useStyles = makeStyles((theme) => ({
    formControl: {
        margin: theme.spacing(3),
    },
    formControl: {
        position: 'absolute',
        left: 0,
        top: 0,
        transform: 'translate(0, 24px) scale(1)',
      },
    labelRoot: {
        right: "20px",
      },
      shrink: {
        transformOrigin: "top right",
        transform:"translateX(50px)"
    }
}));

and my textfield is

<TextField
                    style={{ direction: "rtl" }}
                    InputLabelProps={{
                        classes: { root: classes.labelRoot, shrink: classes.shrink }
                      }}
                    label={t("Ad Title (eg: Toyota Camry 2018 for Sale)")}
                    variant="outlined"
                    fullWidth
                    onChange={ev => setData({
                        ...data,
                        title: ev.target.value
                    })}
                    value={data ? data.title : ''}
                    required
                />

reactjs material-ui

Solution 1:^[1]

I think you need to dir="rtl" to body.

As per MUI documentation, You can do this.

HTML Make sure the dir attribute is set on the body, otherwise native components will break:

    <body dir="rtl"></body>

As an alternative to the above, you can also wrap your application in an element with the dir attribute:

function App() {
  return (
    <div dir="rtl">
      <MyComponent />
    </div>
  );
}

This can be helpful for creating components to toggle language settings in the live application.

Theme Set the direction in your custom theme:

const theme = createTheme({
  direction: 'rtl',
});

If you look into the MUI documentation it specifically mentions the direction change and a similar experience is implemented with the mui documentation theme as well.

In addition to this,

Solution 2:^[2]

you can follow this simple example to change direction to the right.
make sure to install required packages in order for this to work :
if you use npm :

npm install stylis-plugin-rtl @emotion/react @emotion/cache

if you use yarn :

yarn install stylis-plugin-rtl @emotion/react @emotion/cache

Make sure the dir attribute is set on the body, otherwise native components will break:

<body dir="rtl"></body>

import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import TextField from '@mui/material/TextField';
// or import { TextField } from "@mui/material";
import rtlPlugin from 'stylis-plugin-rtl';
import { prefixer } from 'stylis';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

const theme = createTheme({
  direction: 'rtl', // Both here and <body dir="rtl">
});
// Create rtl cache
const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [prefixer, rtlPlugin],
});

export default function Direction() {
  return (
    <CacheProvider value={cacheRtl}>
      <ThemeProvider theme={theme}>
        <div dir="rtl">
          <TextField label="Name" variant="standard" />
          <input type="text" placeholder="Name" />
        </div>
      </ThemeProvider>
    </CacheProvider>
  );
}

you can check the documentation here : Mui RTL

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mehul Thakkar
Solution 2	Salah

'Place material ui Text filed label on the top right of the Border instead of the left

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]