如何在Mantine Badge组件中实现两段文本左右两端对齐并添加间距？

嘿，我看你遇到的问题啦！你现在的代码里，把两个文本都塞进<Group>组件里了，这就是问题所在哦～

<Group>本身是个flex容器，它会把里面的元素紧紧凑在一起，作为一个整体成为Badge的子元素。而你给Badge设置的justify-content: space-between是作用在它的直接子元素上的，现在Badge只有Group这一个直接子元素，自然没法让两个文本分开左右对齐啦。

给你两个简单的解决办法：

方法一：直接移除<Group>组件 #

既然Badge已经设置了flex布局，直接把两个<GolosText>放在Badge里就行，这样它们就会成为Badge的两个直接子元素，space-between就能生效了：

<div>
  <Stack>
    <Badge fullWidth variant="light" color="gray" tt="none" h={30} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <GolosText size="16px" c="black" fw={600}>Size:</GolosText> 
      <GolosText size="16px" c="black">L</GolosText>
    </Badge>
  </Stack>
</div>

方法二：如果需要保留类似Group的间距（可选） #

要是你原本用Group是想给两个文本之间留小间距，但又要整体左右对齐的话，可以把Group换成一个宽度100%的flex容器，不过其实方法一更直接，除非你有额外的样式需求：

<div>
  <Stack>
    <Badge fullWidth variant="light" color="gray" tt="none" h={30} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div style={{ display: 'flex', gap: '8px' }}>
        <GolosText size="16px" c="black" fw={600}>Size:</GolosText> 
      </div>
      <GolosText size="16px" c="black">L</GolosText>
    </Badge>
  </Stack>
</div>

这样修改后，"Size:"就会乖乖待在Badge的最左边，"L"会在最右边啦～

备注：内容来源于stack exchange，提问作者Nurlybek