如何让Material UI的FAB组件在CSS Grid布局中跨2列显示

修改方案 #

你只需要两步调整即可实现需求：

1. 修改JSX代码，给数字0的Fab按钮添加自定义类名

找到最后一行0对应的Fab组件，添加className属性：

// 原来的代码
<Fab> 0 </Fab>
// 修改后的代码
<Fab className="fab-zero"> 0 </Fab>

2. 在CSS文件中添加自定义样式

.fab-zero {
  /* 实现跨2列布局 */
  grid-column: span 2;
  /* 宽度拉伸适配2列空间，比同行按钮大一倍左右 */
  width: 90%;
  /* 取消MUI默认最小宽度限制 */
  min-width: unset;
  /* 把默认圆形修改为椭圆形 */
  border-radius: 48px;
  /* 覆盖父级row的居中对齐，允许按钮横向拉伸 */
  justify-self: stretch;
  /* 可选：调大字体适配大尺寸按钮 */
  font-size: 1.2rem;
}

效果说明

• grid-column: span 2会让0按钮自动占据所在行的前2列位置
• 宽度设置为90%既保证比同行其他按钮大，也保留了和左右边距的一致性
• 48px的圆角刚好可以让横向拉长的按钮呈现椭圆形，不会太方也不会保持圆形

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