Bulma 和 React 中子组件的间距

Posted 2023-02-21

【中文标题】Bulma 和 React 中子组件的间距

【英文标题】：Spacing of child components in Bulma and React

【发布时间】：2022-01-17 03:18:39

【问题描述】：

我正在努力使用 React 和 Bulma 正确填充某些表单字段。 我想构建一个密码字段 React 组件，其中渲染看起来像这样：

    <div className="field">
      <div className="field has-addons">
        <p className="control has-icons-left is-expanded">
          <input
            className="input"
            type=passwordFieldType
            placeholder="Passwort"
            value=props.value
            required=true
            onChange=e => props.update(e.target.value)
          />
          <span className="icon is-small is-left">
            <FontAwesomeIcon icon=faLock />
          </span>
        </p>
        <p className="control">
          <a
              className="button"
              onClick=() => setPasswordVisible(!passwordVisible)>
            <span className="icon is-small is-right">
              <FontAwesomeIcon icon=passwordVisibleIcon />
            </span>
          </a>
        </p>
      </div>
      props.children
    </div>

我添加了一个进度条，指示密码强度作为子组件：

    <PasswordField value=password update=props.update>
      <progress
        className=`progress is-small $passwordIndicatorColor`
        max=MAX_PASSWORD_SCORE
        value=passwordScore
      />
      props.children
    </PasswordField>

然后将该组件与一个电子邮件字段和一个框一起使用来创建注册视图：

这和我想要的很接近，唯一的问题是进度条离密码字段太远了。我尝试将进度条的上边距更改为 0，如下所述：https://bulma.io/documentation/helpers/spacing-helpers/，但它没有做任何事情。

这是我的目标的模型：

如何让密码字段和进度条靠得更近？

【参考方案1】：

解决方法是将mb-0添加到Bulma spacing documentation中描述的字段定义中：

    <div className="field">
      <div className="field has-addons mb-0">
        <p className="control has-icons-left is-expanded">
          <input
            className="input"
            type=passwordFieldType
            placeholder="Passwort"
            value=props.value
            required=true
            onChange=e => props.update(e.target.value)
          />
          <span className="icon is-small is-left">
            <FontAwesomeIcon icon=faLock />
          </span>
        </p>
        <p className="control">
          <a
              className="button"
              onClick=() => setPasswordVisible(!passwordVisible)>
            <span className="icon is-small is-right">
              <FontAwesomeIcon icon=passwordVisibleIcon />
            </span>
          </a>
        </p>
      </div>
      props.children
    </div>

我之前已经尝试过，但误读了文档并尝试了 ma​​rgin-bottom-0 而不是 mb-0。