导航栏文本换行后多余空格及组件间隙去除问题求助

1. 移除导航项之间的间隙 #

当前导航项的间隙来自两个核心点：

• 垂直Divider设置的marginX: 1
• Typography组件自带的默认内外边距

直接调整这两处即可：

• 把Divider的marginX: 1改为marginX: 0，彻底消除分隔线的左右间距
• 给Typography添加margin: 0，去掉它自带的边距；如果担心点击区域过小，可额外加paddingX: 1保留合适的点击空间

2. 消除换行后文本的多余空格 #

要让换行后的文本紧凑无多余空格，给Typography调整以下样式：

• 设置lineHeight: 1.2（数值可根据视觉需求微调），缩小行与行之间的间距
• 开启whiteSpace: "normal"允许正常换行，搭配wordBreak: "break-word"让长文本自动拆分换行
• 去掉默认margin，避免额外留白影响紧凑感

修改后的完整代码 #

<Box
    display="flex"
    justifySelf="start"
    flex="1 1 0"
    alignItems="center"
    sx={{
        flexDirection: "row",
        width: "100%",
        alignItems: "center",
        flexWrap: "wrap", // 小屏自动换行，建议添加以适配笔记本视图
    }}
>
    {pages &&
        pages.map((page: Page, index: number) => (
            <Fragment key={page.id}>
                {index !== 0 && (
                    <Divider
                        sx={{ marginX: 0, paddingY: "15px" }}
                        orientation="vertical"
                        variant="middle"
                        flexItem
                    />
                )}
                <Typography
                    component={Link}
                    to={`/${siteId}/${page.id}`}
                    key={page.id}
                    sx={{
                        color:
                            page.id === activePage?.id
                                ? theme.palette.common.white
                                : theme.palette.grey["200"],
                        textDecoration: "none",
                        margin: 0,
                        paddingX: 1,
                        lineHeight: 1.2,
                        whiteSpace: "normal",
                        wordBreak: "break-word",
                    }}
                >
                    {page.name}
                </Typography>
            </Fragment>
        ))}
</Box>

补充说明 #

如果不需要导航项之间的分隔线，直接删除Divider的代码即可，实现完全紧凑的导航项布局。

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