React中<label>元素width设置不生效，如何控制其尺寸与内部Box一致

问题原因 #

• <label> 元素默认是 inline（行内） 元素，行内元素不支持直接设置width属性，宽度默认由内部文本内容撑开，这就是直接设置宽度不生效的核心原因。
• 内部Box组件设置的width: 100%是相对于直接父元素（即包裹它的label）的计算宽度生效的，label本身宽度没有撑满父容器，Box自然也无法达到预期的满宽效果。
• 外层.DragDrop-File是flex布局容器，通过mixin设置了align-items: center，该属性会让flex子项（即label）默认收缩到内容宽度，不会自动拉伸占满横向空间。
• 移除label后Box直接作为flex容器的子元素，本身是块级元素且设置了width: 100%，因此可以正常撑满容器，符合预期。

修复方案 #

不需要改动现有DOM结构，只需要给label元素添加样式让它撑满父容器宽度即可，有两种改法可选：

方案1：修改SCSS样式（推荐） #

在.DragDrop-File样式块中新增label的样式规则：

.DragDrop {
  width: 100%;
  height: 20vh;
  @include alignCenter();
  
  &-File {
    width: 100%;
    height: 200px;
    border: 2px dashed grey;
    border-radius: 10px;
    
    @include alignCenterVertical();
    cursor: pointer;
    transition: 0.12s ease-in;

    // 新增label样式
    label {
      width: 100%;
      display: block; // 转为块级元素让width属性生效，同时避免内部边框溢出
    }
  
    &-Dragging {
      width: 100%;
      @include filledStyle();
    }
  }

  &-FileBox {
    width: 100%;
    height: 200px;
    border: 2px dashed grey;
    border-radius: 10px;
    
    @include alignCenterVertical();
    cursor: pointer;
    transition: 0.12s ease-in;
  }
}

方案2：添加行内样式 #

如果不想修改全局SCSS，也可以直接在React组件的label标签上添加行内样式：

<label 
  htmlFor="fileUpload" 
  style={{ width: '100%', display: 'block' }}
>
  <Box ref={dragRef} className={"DragDrop-FileBox"}>
    <Typography variant="h5">
      {isDragging ? "Drop here!" : "Drag files"}
    </Typography>
  </Box>
</label>

修改后label会撑满父容器宽度，内部Box的width: 100%可以正常生效，渲染效果和移除label时完全一致，label关联隐藏input触发文件选择的功能也不会受影响。

内容的提问来源于stack exchange，提问作者S. Yong