如何单独修改TextField标签位置而非全局配置RTL？

我希望在不将整个项目配置为RTL（从右到左）的情况下，单独调整TextField组件的标签位置，仅通过样式修改实现。试了多种方法都没解决——现在已经把标签文本移到了右侧，但输入框边框左侧的空白区域依然存在。

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

我按照建议尝试了包裹RTL组件的方式，但依然没有效果：

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';

// 配置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>

内容的提问来源于stack exchange，提问作者Ofir Sasson