移除Bottom Sheet按钮的:focus与:active状态聚焦及激活效果

针对你的mat-raised-button在点击时及点击后的灰色背景问题，需要同时覆盖按钮自身的状态样式和Material内部的波纹/触摸元素样式，以下是可行的CSS代码：

完整CSS代码（组件内使用需加::ng-deep穿透） #

/* 重置按钮基础样式 */
::ng-deep .options-menu.mat-raised-button {
  box-shadow: none;
  background-color: transparent; /* 根据需求设置初始背景，这里设为透明 */
}

/* 覆盖:focus、:active、:focus-visible状态样式 */
::ng-deep .options-menu.mat-raised-button:focus,
::ng-deep .options-menu.mat-raised-button:active,
::ng-deep .options-menu.mat-raised-button:focus-visible {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none; /* 移除焦点轮廓（可选） */
}

/* 移除波纹效果的背景色 */
::ng-deep .options-menu.mat-raised-button .mat-mdc-button-ripple,
::ng-deep .options-menu.mat-raised-button .mat-mdc-button-persistent-ripple::before {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 清除触摸目标元素的样式 */
::ng-deep .options-menu.mat-raised-button .mat-mdc-button-touch-target {
  background-color: transparent !important;
}

关键说明 #

1. 选择器优先级：必须结合.mat-raised-button类提升选择器权重，否则会被Material的默认样式覆盖
2. 样式隔离穿透：如果在Angular组件的CSS文件中编写，需用::ng-deep突破组件样式隔离，确保样式能作用到Material按钮的内部子元素
3. 覆盖所有状态：除:focus和:active外，还要处理:focus-visible（现代浏览器的焦点可见状态），避免遗漏

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