React MUI中如何修改ListItemIcon组件默认LTR对齐方向

你当前代码里把direction: "rtl"写在CloseIcon上是无效的：direction是CSS排版属性，只对块级容器、行内文本的排布逻辑生效，对内嵌的SVG图标元素本身不起作用，自然没法改变ListItemIcon的位置。
可以根据实际场景选以下几种方案实现：

方案1：全局开启RTL模式 #

如果整个项目都需要右到左的排版逻辑，直接配置MUI主题全局开启RTL即可，所有组件都会自动适配RTL排布：

• 创建主题时将direction字段设为rtl
• 给应用根DOM节点添加dir="rtl"属性
  参考代码：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import CloseIcon from '@mui/icons-material/Close';

// 配置RTL主题
const rtlTheme = createTheme({
  direction: 'rtl',
});

export default function DemoList() {
  return (
    <ThemeProvider theme={rtlTheme}>
      {/* 根节点绑定dir属性 */}
      <div dir="rtl">
        <List>
          <ListItem disablePadding>
            <ListItemButton>
              <ListItemIcon>
                <CloseIcon />
              </ListItemIcon>
              <ListItemText primary="关闭选项" />
            </ListItemButton>
          </ListItem>
        </List>
      </div>
    </ThemeProvider>
  )
}

方案2：局部容器设置RTL #

如果只有单个列表模块需要右到左排布，不需要改全局配置，直接给ListItemButton加RTL样式即可，不要把样式加在图标上：

<ListItem disablePadding>
  <ListItemButton style={{ direction: "rtl" }}>
    <ListItemIcon>
      <CloseIcon />
    </ListItemIcon>
    <ListItemText primary="关闭选项" />
  </ListItemButton>
</ListItem>

ListItemButton默认是flex布局容器，加上direction: rtl后会自动调换子元素排布顺序，让ListItemIcon显示在右侧。

方案3：纯样式调整图标位置 #

如果不需要完整的RTL交互、文本排版逻辑，只是想把图标从默认左侧移到右侧，直接调整flex布局的元素顺序和边距即可，不需要设置direction属性：

<ListItem disablePadding>
  <ListItemButton>
    <ListItemText primary="关闭选项" />
    <ListItemIcon sx={{ minWidth: 'auto', marginLeft: 16, marginRight: 0 }}>
      <CloseIcon />
    </ListItemIcon>
  </ListItemButton>
</ListItem>

这种写法直接调换了文本和图标的渲染顺序，同时覆盖了ListItemIcon默认的右外边距，实现图标居右的效果，逻辑更轻量。

注意：如果只需要调整单个列表项的图标位置，优先选方案3，不会影响容器内文本的对齐方向、交互热区等RTL附带的排版规则。

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