ReactJS+Material UI：如何用Grid布局在按钮下方适配文本

下面是几种实用的实现方式，根据你的项目场景选择即可：

1. 通用HTML+CSS自定义实现 #

适合需要完全自定义样式的场景，通过容器包裹按钮和文本，控制排版：

<!-- HTML结构 -->
<div class="btn-with-desc">
  <button class="action-btn">提交</button>
  <p class="btn-text">提交后将无法修改内容</p>
</div>

/* 样式设置 */
.btn-with-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 可选：给容器设置宽度，让文本换行更合理 */
  width: 120px;
}

.action-btn {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
}

.btn-text {
  margin: 6px 0 0;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

2. 借助UI框架快速实现（以Bootstrap为例） #

如果项目已引入Bootstrap，用内置类就能快速完成布局：

<div class="d-flex flex-column align-items-center">
  <button class="btn btn-success mb-2">下载</button>
  <small class="text-secondary">文件大小约20MB</small>
</div>

3. 极简原生实现（适合简单场景） #

不需要复杂样式时，直接用换行和基础标签：

<button>删除</button>
<br>
<small>此操作不可恢复</small>

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