样式按钮看起来像输入类型

Question

我有几个按钮和一个当前看起来像这样的数量字段：

这是我目前使用的代码：

<Col className="col-3">
     {
          product.quantity > 1 &&
          <button
               onClick={() => decrease(product)}
               className="btn btn-md">
               <i className="fa fa-minus-square fa-2x" aria-hidden="true"></i>
          </button>
     }
     {
          product.quantity === 1 &&
          <button
               onClick={() => removeProduct(product)}
               className="btn btn-md">
               {/* <TrashIcon width={"20px"} /> */}
               <i className="fa fa-trash fa-2x" aria-hidden="true"></i>
          </button>
     }

          &nbsp; <b>{product.quantity}</b> &nbsp;
          <button
          onClick={() => increase(product)}
          className="btn btn-md">
          <i className="fa fa-plus-square fa-2x" aria-hidden="true"></i>
     </button>
</Col>

我想将此按钮输入字段的样式设置为如下所示：

我不确定在这种情况下我们是否可以将样式元素与核心业务逻辑结合起来。