如何在MUI Card中右对齐搜索栏？实现标题左置布局

针对你的需求，只需调整Material-UI Stack组件的布局配置即可解决，具体修改如下：

修改后的代码 #

export default function ContactsCard(Rows) {
  return (
    <Card sx={{ minWidth: 900, minHeight: 1 }}>
      <CardContent>
        <Stack direction="row" alignItems="center" justifyContent="space-between" gap={1}>
          {/* 左侧标题组 */}
          <Stack direction="row" alignItems="center" gap={1}>
            <RuleIcon sx={{ color: "text.secondary" }} />
            <Typography 
              sx={{ fontSize: 16, fontWeight: 'bold' }} 
              color="text.secondary" 
              gutterBottom
            >
              Transactions
            </Typography>
          </Stack>
          {/* 右侧搜索栏 */}
          <SearchBar rows={Rows} />
        </Stack>
        <DataGridHelper title='Contact' rows={Rows} columns={columns} />
      </CardContent>
    </Card>
  );
}

关键调整点 #

• 给外层Stack添加justifyContent="space-between"：让水平方向的子元素分别靠向容器两端，自动填充中间空白
• 将图标与标题包裹在子Stack中：确保标题区域作为一个整体靠左，避免元素被分散
• 修正SearchBar的参数错误：原代码中组件接收的参数是Rows（大写R），你之前写的rows={rows}会导致变量未定义

当前布局效果：

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