ReactJS中调整ReactBootstrap按钮适配Material-UI Paper的求助

嘿，我来帮你搞定这个按钮宽度的问题！你想要让Buy Now按钮和上方Material-UI的Paper盒子宽度一致，其实只需要调整ButtonGroup和Button的宽度设置就行，React Bootstrap本身是支持通过类或者内联样式来控制尺寸的，可能你没注意到这些小技巧~

核心思路 #

问题出在：React Bootstrap的ButtonGroup和Button默认都是inline-block元素，不会自动占满父容器的宽度。所以我们需要显式让它们的宽度和上方的Paper对齐。

具体解决方案 #

你可以用两种方式实现，推荐用Bootstrap自带的工具类，更符合React Bootstrap的使用习惯：

方法1：使用Bootstrap工具类（推荐）

Bootstrap提供了w-100类，作用就是设置元素宽度为100%。给ButtonGroup和Button都加上这个类，再调整下间距就好：

<div style={{ float: "right", paddingRight: "5rem" }}>
  <TableContainer className="basket-summary" component={Paper} style={{ float: "right", top: "0", display: "flex", flexDirection: "column", maxHeight: "9vw", maxWidth: "14vw" }} >
    <Table >
      <TableHead>
        <TableRow>
          <TableCell>Summary </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <tr>
          <td>SubTotal:{totalPrice}</td>
        </tr>
        <tr>
          <td></td>
        </tr>
      </TableBody>
    </Table>
  </TableContainer>
  {/* 给ButtonGroup加w-100和mt-3（margin-top），Button加w-100 */}
  <ButtonGroup aria-label="quantityofproduct" className="w-100 mt-3">
    <Button className="button-block w-100" variant="primary" name="subtract" value="subtract" onClick={() => buyNow(basketItems)}> Buy Now </Button>
  </ButtonGroup>
</div>

方法2：使用内联样式

如果你不想用Bootstrap工具类，也可以直接写内联样式：

<div style={{ float: "right", paddingRight: "5rem" }}>
  <TableContainer className="basket-summary" component={Paper} style={{ float: "right", top: "0", display: "flex", flexDirection: "column", maxHeight: "9vw", maxWidth: "14vw" }} >
    <Table >
      <TableHead>
        <TableRow>
          <TableCell>Summary </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <tr>
          <td>SubTotal:{totalPrice}</td>
        </tr>
        <tr>
          <td></td>
        </tr>
      </TableBody>
    </Table>
  </TableContainer>
  <ButtonGroup aria-label="quantityofproduct" style={{ width: '100%', marginTop: '1rem' }}>
    <Button className="button-block" variant="primary" name="subtract" value="subtract" onClick={() => buyNow(basketItems)} style={{ width: '100%' }}> Buy Now </Button>
  </ButtonGroup>
</div>

额外优化 #

如果想要按钮和Paper的宽度完全一致，你可以把Paper的min-width和max-width属性同步到ButtonGroup上，比如在CSS里加：

.basket-summary + .btn-group {
  min-width: 10rem;
  max-width: 14vw;
}

这样就能确保两者的宽度约束完全相同，布局更统一。

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