ReactTS中MUI Stack组件元素布局问题：实现左侧按钮左对齐、中间文本居中

我来帮你搞定这个布局问题！你当前的代码里用了两个独立的Stack作为flex容器的子元素，这会导致第二个Stack的justifyContent: center只是在它自身的宽度范围内生效，而不是相对于整个行的中间位置。我们只需要调整布局结构，用一个父容器统一控制整体排列逻辑就可以达到预期效果。

修复后的代码示例 #

import * as React from "react";
import { Button, Typography, Stack } from '@mui/material';
import Box from "@mui/material/Box";

export default function DirectionStack() {
  return (
    <Stack direction="row" fullWidth alignItems="center" spacing={2}>
      {/* 按钮固定左对齐，flexShrink:0 避免被压缩 */}
      <Button 
        variant="contained" 
        size="small" 
        sx={{ 
          backgroundColor: "#1B1C89", 
          flexShrink: 0 
        }}
      >
        My button
      </Button>
      
      {/* 占据剩余空间，内部文本居中 */}
      <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
        <Typography sx={{ fontWeight: 'bold' }}>Some Text</Typography>
        <Typography sx={{ color: 'green', fontWeight: 'bold', ml: 1 }}>Some Green Text</Typography>
      </Box>
    </Stack>
  );
}

关键调整说明 #

• 父容器设置：用fullWidth的水平Stack作为父容器，确保它占满整个可用宽度，为后续的对齐逻辑提供基础。
• 按钮固定：给按钮添加flexShrink: 0属性，保证它不会因为文本容器的拉伸而被压缩变形，始终保持自身宽度并停靠在左侧。
• 文本居中逻辑：用flex: 1的Box包裹两个Typography，这个Box会占据按钮之外的所有剩余空间；再通过justifyContent: 'center'让内部文本在这个空间里居中，实现相对于整个行的居中效果。
• 细节优化：给第二个Typography添加ml: 1（即marginLeft: 1），让两个文本之间保留适当间距，提升视觉体验。

这样修改后，按钮就会始终固定在左侧，两个文本则会精准显示在整行的中间位置啦！

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