如何实现父元素为fixed的MUI Typography元素文本对齐？

Home 组件 #

const Home = ({ mode, setMode }) => {
  return (
    <Box m={-1} sx={{overflowX:'hidden'}}>
      <Navber/>
      <Stack direction="row" spacing={2} justifyContent="space-between">
        <Leftbar/>
        <Feed/>
        <Rightbar/>      
      </Stack>
    </Box>
  );
}; 

Leftbar 组件 #

const Leftbar = () => {
    const styles = {
      typo: { 
        position: 'fixed',
        color:'blue',
        textAlign: 'center', 
      },
    };
return (
      <Box
        flex={3}
        p={2}
        bgcolor="red"
        sx={{ display: { xs: 'none', sm: 'block' } }}
      >
        <Box position="fixed" maxWidth="20%">
          <Typography variant={'h4'} style={styles.typo}>
            Sam Aggarwal
          </Typography>
        </Box>
      </Box>
    );
  };

  export default Leftbar;

需求与问题 #

我尝试了相对定位、内联块等多种方法，但仍无法实现元素居中。具体需求为：第一个Typography元素居中显示，其余Typography元素居左排列在其下方；同时请勿移动第二个position为fixed的Box，我需要保持该位置不变。

解决方案 #

问题核心是给Typography单独设置position: fixed后，它脱离了父级fixed容器的宽度约束，导致textAlign: center无法基于父容器生效。按以下方式修改即可满足需求：

修改后的Leftbar代码：

const Leftbar = () => {
  return (
    <Box
      flex={3}
      p={2}
      bgcolor="red"
      sx={{ display: { xs: 'none', sm: 'block' } }}
    >
      {/* 保留原fixed Box的位置与宽度设置 */}
      <Box position="fixed" maxWidth="20%" width="100%">
        {/* 第一个Typography：基于父容器宽度居中 */}
        <Typography variant={'h4'} sx={{ color: 'blue', textAlign: 'center' }}>
          Sam Aggarwal
        </Typography>
        {/* 后续Typography：默认居左，自动排列在下方 */}
        <Typography variant="body1" sx={{ mt: 2 }}>
          居左内容示例1
        </Typography>
        <Typography variant="body1" sx={{ mt: 1 }}>
          居左内容示例2
        </Typography>
      </Box>
    </Box>
  );
};

export default Leftbar;

关键修改点 #

1. 移除Typography的fixed定位：父级Box已经是fixed，内部元素不需要重复设置，否则会脱离父容器的宽度限制
2. 给父容器添加width: 100%：确保父容器实际宽度等于maxWidth="20%"的设定，让textAlign: center能基于这个宽度生效
3. 默认居左逻辑：后续的Typography不设置textAlign属性，默认就是居左排列，自然落在第一个居中元素的下方靠左位置

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