如何配置MUI TextField适配希伯来语？修复标签位置异常

当切换到希伯来语（RTL布局）时，仅设置dir和lang属性不足以让MUI Outlined TextField的标签正确定位，原因是组件默认的LTR样式优先级较高。以下是几种可行的修复方案：

方案1：全局配置RTL主题（推荐） #

如果你的应用需要全局支持RTL语言，直接在MUI主题中配置RTL，所有组件会自动适配布局，包括TextField的标签位置：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import rtlPlugin from 'stylis-plugin-rtl';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

// 创建RTL样式缓存
const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [rtlPlugin],
});

// 创建RTL主题
const theme = createTheme({
  direction: 'rtl',
});

// 在应用根组件包裹全局配置
function App() {
  return (
    <CacheProvider value={cacheRtl}>
      <ThemeProvider theme={theme}>
        <TextField
          label={isEnglish ? "Name" : "שם"}
          variant="outlined"
          className="w-[300px]"
          dir={isEnglish ? "ltr" : "rtl"}
          lang={isEnglish ? "en" : "he"}
        />
      </ThemeProvider>
    </CacheProvider>
  );
}

方案2：单独为TextField自定义RTL样式 #

如果仅需单个组件适配RTL，可通过自定义样式覆盖默认LTR布局：

import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

// 自定义RTL适配的TextField组件
const RtlTextField = styled(TextField)(({ theme }) => ({
  '& .MuiOutlinedInput-notchedOutline': {
    right: 0,
    left: 'unset',
  },
  '& .MuiInputLabel-outlined': {
    transformOrigin: 'top right',
    right: 14,
    left: 'unset',
    '&.MuiInputLabel-shrink': {
      transform: 'translate(0, -1.5px) scale(0.75)',
      right: 14,
      left: 'unset',
    },
  },
}));

// 使用自定义组件
<RtlTextField
  label={isEnglish ? "Name" : "שם"}
  variant="outlined"
  className="w-[300px]"
  dir={isEnglish ? "ltr" : "rtl"}
  lang={isEnglish ? "en" : "he"}
/>

方案3：通过组件属性调整标签位置 #

直接利用TextField的InputLabelProps和InputProps属性，针对性调整标签和输入框样式：

<TextField
  label={isEnglish ? "Name" : "שם"}
  variant="outlined"
  className="w-[300px]"
  dir={isEnglish ? "ltr" : "rtl"}
  lang={isEnglish ? "en" : "he"}
  InputLabelProps={{
    style: isEnglish ? {} : {
      transformOrigin: 'top right',
      right: 14,
      left: 'unset',
    },
  }}
  InputProps={{
    style: isEnglish ? {} : {
      paddingLeft: 'unset',
      paddingRight: 14,
    },
  }}
/>

注意事项 #

• 设置dir="rtl"后，输入框内的文本会自动右对齐，符合希伯来语阅读习惯；
• 使用全局RTL配置时，需确保已安装依赖stylis-plugin-rtl、@emotion/cache和@emotion/react。

内容的提问来源于stack exchange，提问作者MD. MEHEDI IMAM