如何在MUI RTL模式下调整输入框边框与搜索图标的位置？

在MUI开启RTL（从右到左）模式后，输入框边框和搜索图标未自动翻转，通常是因为RTL配置不完整，或者自定义样式覆盖了框架的RTL默认规则。以下是具体解决步骤：

1. 确认RTL基础配置正确 #

首先必须确保应用已正确接入RTL支持，包括Emotion缓存和主题方向设置：

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',
});

// 用CacheProvider和ThemeProvider包裹整个应用
<CacheProvider value={cacheRtl}>
  <ThemeProvider theme={theme}>
    {/* 你的页面/组件 */}
  </ThemeProvider>
</CacheProvider>

2. 修复搜索图标（InputAdornment）位置 #

如果搜索图标没有自动切换到左侧，可通过InputProps手动适配RTL规则，或利用主题的direction属性动态调整：

import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import SearchIcon from '@mui/icons-material/Search';

// 组件内使用
<TextField
  variant="outlined"
  placeholder="搜索..."
  InputProps={{
    // RTL模式下，position="start"会自动对应左侧，若失效可手动调整边距
    startAdornment: (
      <InputAdornment position="start">
        <SearchIcon />
      </InputAdornment>
    ),
    sx: ({ theme }) => ({
      '& .MuiInputAdornment-positionStart': {
        marginRight: theme.spacing(1),
        marginLeft: 0,
      },
    }),
  }}
/>

3. 调整输入框边框圆角/位置 #

若输入框边框未按RTL方向翻转（比如默认圆角在右侧，需要换到左侧），可通过全局主题样式或组件内sx属性修改：

全局主题配置（一次性生效所有输入框） #

const theme = createTheme({
  direction: 'rtl',
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-notchedOutline': {
            borderTopRightRadius: 4, // RTL下右侧设为圆角
            borderBottomRightRadius: 4,
            borderTopLeftRadius: 0, // 左侧设为直角
            borderBottomLeftRadius: 0,
          },
        },
      },
    },
  },
});

单个组件自定义样式 #

<TextField
  variant="outlined"
  sx={{
    '& .MuiOutlinedInput-notchedOutline': {
      borderTopRightRadius: 4,
      borderBottomRightRadius: 4,
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0,
    },
  }}
/>

关键注意点 #

• 避免硬写固定的margin-left/margin-right，尽量使用theme.spacing()和theme.direction动态判断
• 确保所有自定义样式都继承了RTL主题的上下文，不要在组件内单独设置direction: ltr覆盖全局配置

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