Can I change the position of label in MUI?

Question

I'm using Material UI for react,I want to change the place of label in text fields and bring it to the right, but because it has motion it doesn't look good how can I change that? I want it to be like this but the white part doesn't move.

Answer 1

Solution for MUI v5

1. Add dir attribute to your body tag or any container where you want to apply rtl direction styles.
2. Set the direction

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

3. Install stylis-plugin-rtl
4. Load the rtl plugin and wrap it around your components

const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [rtlPlugin],
});

function RTL(props) {
  return <CacheProvider value={cacheRtl}>{props.children}</CacheProvider>;
}

Working demo

Source MUI v5

Source MaterialUI v4