Angular自定义mat-cell组件背景未填满且复选框点击内容上移问题

一、让背景色完全填满单元格 #

Angular Material的mat-cell默认带有内边距，直接给单元格加背景色会被内边距截断，调整样式逻辑即可解决：

1. 用内部容器承载背景色
   在<custom-mat-cell>组件内添加容器元素，将背景色应用到该容器，让容器占满整个单元格：

   <!-- custom-mat-cell.component.html -->
   <div class="cell-wrapper" [class.checked]="childIsChecked">
     <custom-checkbox (checkedChange)="handleCheckedChange($event)"></custom-checkbox>
   </div>
   

2. 配置容器与单元格样式
   在组件样式中设置宽高、盒模型和布局：

   /* custom-mat-cell.component.css */
   .cell-wrapper {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 12px; /* 替代mat-cell默认内边距，可按需调整 */
     box-sizing: border-box;
   }
   
   .cell-wrapper.checked {
     background-color: #e8f5e9; /* 选中状态的背景色 */
   }
   
   /* 清除mat-cell默认内边距，避免嵌套内边距 */
   :host ::ng-deep .mat-cell {
     padding: 0;
     height: 100%;
     width: 100%;
     box-sizing: border-box;
   }
   

3. 固定行高确保对齐
   在表格所在组件的样式中设置统一行高：

   .mat-row {
     height: 56px; /* Angular Material默认行高，可自定义 */
   }
   

二、阻止首次点击内容上移 #

该问题多由自定义复选框的默认样式（外边距、聚焦轮廓）导致布局重排，调整如下：

1. 清除复选框默认样式
   在<custom-checkbox>组件的样式中添加：

   .custom-checkbox {
     margin: 0;
     outline: none; /* 移除默认聚焦轮廓，如需保留可自定义样式 */
     display: inline-flex;
     align-items: center;
   }
   

2. 确保内容垂直居中
   借助flex布局让复选框始终保持在单元格垂直居中位置，避免点击时位移：

   /* 已包含在cell-wrapper的样式中 */
   .cell-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
   }
   

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