复选框标签全宽

Question

我有一个 <Checkbox> 组件包裹在 <FormControlLabel> 中。它们被放置在这样的容器中：

<FormGroup row={true} key={option.id}>
  <FormControlLabel
    className="ContractOfferOptionsSelector__option"
    key={option.id}
    control={
      <Checkbox checked={option.selected} onChange={this.handleChange} value={String(option.id)} />
    }
    label={this.renderLabel(option)}
  />
</FormGroup>

private renderLabel(option: ISelectableOption) {
    return (
      <div className="ContractOfferOptionsSelector__option">
        <span className="ContractOfferOptionsSelector__option__title">
          <span className="ContractOfferOptionsSelector__option__title__abbreviation">{option.abbreviation}</span>
          <span className="ContractOfferOptionsSelector__option__title__description">{option.description}</span>
        </span>
        <span className="ContractOfferOptionsSelector__option__price">
          {`${formatCurrency(option.price.priceInclVat)} ${t(option.price.currency)}`}
        </span>
      </div>
    )
  }

标签呈现为<span> 并“紧密”包裹内容（因此它不会占用容器的整个宽度）。我在标签内放置了多个元素（价格、标题...），并希望标签采用全宽，以便元素在全宽上间隔开。

我尝试了.ContractOfferOptionsSelector__option {width: 100%;}，但它不起作用，因为父级也是<span>？使用动态生成的类名...

material-ui中如何控制label的宽度？

Answer 1

<span> 有一个默认的 inline 显示属性。

内联元素：
- 尊重左右边距和填充，但不尊重顶部和底部
- 不能设置宽度和高度

尝试将display: inline-block 设置为您的<span>，并将position: relative 添加到FormGroup 容器中。