使用Styled Components开发React应用时Flexbox样式不生效问题求助

明确错误点 #

• StyledWrapper 中 padding: 0.5rem 末尾缺少分号，导致紧邻的 width: 200px 样式无法被浏览器识别，父容器宽度未按预期设置，flex: 1 无法实现撑满父容器的效果
• StyledLabel 设置了多余的 margin-right: 24px，即使元素撑满父容器，也会在右侧预留空白，无法让复选框贴到容器最右侧
• StyledLabel 的 ::before 伪元素未声明 position: absolute，仅写 top: 4px 无法生效，伪元素位置计算不符合预期
• ::after 伪元素未设置宽度和对齐规则，选中状态的图标可能出现位置偏移

修正后代码 #

样式代码 #

const StyledWrapper = styled.div`
  position: relative;
  display: inline-flex;
  min-height: 1.5rem;
  margin-right: 1rem;
  padding: 0.5rem;
  width: 200px;
`;

const StyledHiddenInput = styled.input`
  position: absolute;
  z-index: -1;
  visibility: hidden;

  &[type="checkbox"]:checked ~ label::after {
    background-image: url("${checkboxImage}");
    width: 20px;
    height: 20px;
  }
`;

const StyledLabel = styled.label`
  position: relative;
  margin-bottom: 0;
  display: flex;
  margin-left: 0;
  flex-direction: row-reverse;
  justify-content: space-between;
  flex: 1;

  &::before {
    position: absolute;
    display: block;
    top: 4px;
    right: 0;
    width: 20px;
    height: 20px;
    content: "";
    background-color: #fff;
    border: 1px solid black;
    border-radius: 4px;
  }

  &::after {
    position: absolute;
    display: block;
    top: 4px;
    right: 0;
    width: 20px;
    height: 20px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80%;
  }
`;

const StyledLabelWrapper = styled.div`
  margin-left: 0;
  margin-right: 0;
`;

组件调用代码保持不变 #

<StyledWrapper>
   <StyledHiddenInput />
   <StyledLabel>
      <StyledLabelWrapper>{label}</StyledLabelWrapper>
   </StyledLabel>
</StyledWrapper>

验证步骤 #

1. 清理项目缓存后重新编译运行
2. 打开浏览器开发者工具，检查StyledWrapper的计算样式，确认宽度为200px
3. 检查StyledLabel的计算样式，确认flex: 1已生效，无其他样式覆盖
4. 检查复选框伪元素的位置，确认已贴到容器最右侧

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