如何在Material UI的复选框内添加字母或文本？

下面是用HTML+CSS实现的方案，可直接复用，内部文本支持任意修改：

HTML 结构 #

<!-- 示例复选框1 -->
<label class="circle-checkbox">
  <input type="checkbox" />
  <span>1</span>
</label>

<!-- 示例复选框2 -->
<label class="circle-checkbox">
  <input type="checkbox" />
  <span>AB</span>
</label>

<!-- 示例复选框3 -->
<label class="circle-checkbox">
  <input type="checkbox" />
  <span>XYZ</span>
</label>

CSS 样式 #

/* 隐藏原生复选框 */
.circle-checkbox input[type="checkbox"] {
  display: none;
}

/* 自定义圆形复选框样式 */
.circle-checkbox span {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 2px solid #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 复选框选中后的样式 */
.circle-checkbox input[type="checkbox"]:checked + span {
  background-color: #2196F3;
  border-color: #2196F3;
  color: #fff;
}

说明 #

• 直接修改<span>标签内的文本，就能实现不同内容的圆形复选框
• 通过调整width、height、line-height可以改变圆形的大小
• 修改border-color、background-color能自定义选中/未选中状态的配色

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