如何使用CSS移除react-bootstrap中Offcanvas的灰色backdrop且保留点击外部关闭功能

修正方案 #

你当前代码存在两个核心问题导致没生效：

• CSS选择器不匹配：react-bootstrap生成的Offcanvas遮罩默认类名为.offcanvas-backdrop，不是你写的.backdrop
• 不能用display: none：该属性会直接移除遮罩元素，导致点击外部关闭的功能失效，仅需将背景设为完全透明即可保留交互、同时隐藏灰色背景的视觉效果

1. 修改CSS代码

:root{
  --offcanvasWidth: 270px;
  --topsidebarHeight: 66px;
}

.min-media{
  width: var(--offcanvasWidth);
  background-color: #1AA47F;
}

/* 全局所有尺寸下都隐藏灰色遮罩，保留点击关闭功能 */
.offcanvas-backdrop {
  background-color: transparent !important;
}

@media (min-width: 992px) {
  .min-media{
    transform: none;
    visibility: visible;
    top: var(--topsidebarHeight);
    height: calc(100% - var(--topsidebarHeight));
  }
}

如果你只需要在≥992px的大屏场景下隐藏遮罩，把.offcanvas-backdrop的样式挪到媒体查询内部即可。

2. 组件代码无需修改

你当前的Offcanvas没有手动设置backdrop={false}，默认保留了点击外部关闭的交互能力，修改CSS后功能完全不受影响。

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