change TextField label position

Question

I'm trying to change the position of a label in TextFiled without configure my whole project to be rlt like I've seen here on other questions. I just want to change it in style and only for this component. I've tried many examples here but found none that works or suit my need. I succeeded in positioning the label text to the right, but the space in the border is still on the left as shown here

This is the code I wrote:

  const useStyles = makeStyles((theme) => ({
    labelRoot: {
      right: '10px',
    },
    shrink: {
      transformOrigin: 'top right',
      transform: 'translateX(50px)',
    },
  }));
  const classes = useStyles();


<TextField 
     label='שם לקוח'
     InputLabelProps={{classes: {root: classes.labelRoot, shrink: classes.shrink},}}/>

EDIT: I tried to use Steve Gomez suggestion but it still didn't work:

import React from 'react';
import {create} from 'jss';
import rtl from 'jss-rtl';
import {createTheme, ThemeProvider} from '@mui/material/styles';
import {jssPreset, StylesProvider} from '@mui/styles';

// Configure JSS
const jss = create({plugins: [...jssPreset().plugins, rtl()]});

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

function RTL(props) {
  return (
    <StylesProvider jss={jss}>
      <ThemeProvider theme={theme}>
        <div dir='rtl'>{props.children}</div>
      </ThemeProvider>
    </StylesProvider>
  );
}

export default RTL;

....

<RTL>code here</RTL>

Answer 1

There may be an easier way to do this, and the juice may not be worth the squeeze for your particular case, but you can use MUI's Right-to-Left Guide in conjunction with it's Nested Theming functionality to support this use case.

I realize that you said that you only "want to change it in style", but I thought I'd provide this as an alternative option in case none of the other answers that you receive for this question are satisfactory.

In a nutshell, to use this method you'll need to:

1. Install jss-rtl
2. Create a nested theme to wrap the RTL field with direction: "rtl".
3. And create/configure instances of StylesProvider and ThemeProvider (as described in the nesting docs -- NOTE: these instances will be nested inside of the existing ThemeProvider that you're already using for your app.).
4. Wrap your component in an RTL element such as <div dir="rtl">
5. Use your newly created RTL Textfield as you normally would.

Code excerpt:

import rtl from "jss-rtl";
import { StylesProvider, jssPreset } from "@material-ui/core/styles";

const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

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

...

<StylesProvider jss={jss}>
  <ThemeProvider theme={theme}>
    <div dir="rtl">
      <TextField
        label="שם לקוח"
        variant="outlined"
        InputLabelProps={{ shrink: true }}
        fullWidth
      />
    </div>
  </ThemeProvider>
</StylesProvider>

All of that should produce something to the effect of:

Working CodeSandbox: https://codesandbox.io/s/material-demo-forked-61uc5i?file=/demo.js

(FYI I assumed you are using MUI 4 because of your use of makeStyles(), but this can be accomplished with MUI 5 as well.)

Updated Answer with Reusable Component:

To answer a follow-up question, to make this a reusable component what would require not additional styling, you could create this as a wrapper component that could be used as follows:

export const RTLWrapper = ({ children }) => (
  <StylesProvider jss={jss}>
    <ThemeProvider theme={theme}>
      <div dir="rtl">{children}</div>
    </ThemeProvider>
  </StylesProvider>
);

...

<RTLWrapper>
  <TextField
    label="שם לקוח"
    variant="outlined"
    InputLabelProps={{ shrink: true }}
    fullWidth
  />
</RTLWrapper>

...

<RTLWrapper>
  <FormControl component="fieldset">
    <FormLabel component="legend">RTL Options</FormLabel>
      <FormGroup>
        <FormControlLabel
          control={<Checkbox name="gilad" />}
          label="Gilad Gray"
        />
        <FormControlLabel
          control={<Checkbox name="jason" />}
          label="Jason Killian"
        />
        <FormControlLabel
          control={<Checkbox name="antoine" />}
          label="Antoine Llorca"
        />
      </FormGroup>
    <FormHelperText>Helper Text</FormHelperText>
  </FormControl>
</RTLWrapper>

Which would produce:

Working CodeSandbox: https://codesandbox.io/s/material-demo-forked-8gvpx5?file=/demo.js:2678-3447