使用styled-components如何实现TextField固定居中、加载器紧邻其旁的布局

你遇到的偏移问题是因为输入框和加载器作为整体在父容器内居中，加载器占据的宽度会将输入框向左挤压。我们可以通过将加载器脱离常规文档流的方式，避免它影响输入框的居中定位，修改后的样式代码如下：

// 结构保持原有写法不变
<StyledBox>
   <StyledTextFieldContainer>
     <TextField/>
   </StyledTextFieldContainer>
   <StyledLoaderContainer>
     Loading...
   </StyledLoaderContainer>
</StyledBox>

const StyledBox = styled(Box)`
  width: 90%;
  justify-content: center;
  align-items: center;
  display: flex;
`;

const StyledTextFieldContainer = styled(Box)`
  width: 70%;
  display: flex;
  align-items: flex-end;
  /* 新增：作为加载器的定位父容器 */
  position: relative;
`;

const StyledLoaderContainer = styled(Box)`
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 新增定位规则，脱离常规文档流，不会挤压输入框位置 */
  position: absolute;
  /* 控制加载器在输入框右侧的间距，16px可根据需求调整 */
  left: calc(100% + 16px);
  /* 垂直居中对齐输入框 */
  top: 50%;
  transform: translateY(-50%);
`;

实现原理 #

给输入框容器添加position: relative属性后，加载器可以基于它的位置做绝对定位，此时加载器不再占用常规文档流的宽度，输入框会单独在父容器内水平居中，完全不受加载器的位置影响。如果需要调整加载器和输入框的间距，只需要修改left属性里的16px数值即可。

内容的提问来源于stack exchange，提问作者Michal Ružička Ružička