如何取消TailwindCSS-Flowbite Drawer的灰色半透明背景遮罩？

有三种常用方法可以去掉抽屉打开时的灰色半透明背景：

• 通过JS初始化配置关闭遮罩
  如果你是用JavaScript初始化抽屉组件，在实例化时添加backdrop: false参数即可：

  const drawerEl = document.getElementById('你的抽屉ID');
  new Drawer(drawerEl, {
    backdrop: false
  });
  

• 自定义CSS覆盖遮罩样式
  直接给遮罩元素的类写样式，强制隐藏或透明化：

  .drawer-backdrop {
    display: none !important;
    /* 或者用下面的代码完全透明化 */
    /* opacity: 0 !important; */
    /* background-color: transparent !important; */
  }
  

• 修改HTML组件的属性
  如果是用Flowbite提供的原生HTML结构，找到抽屉的根元素，把data-drawer-backdrop属性值改成false，或者直接移除这个属性：

  <!-- 修改前 -->
  <div id="drawer-example" class="drawer" data-drawer-backdrop="true">
    <!-- 抽屉内容 -->
  </div>
  
  <!-- 修改后 -->
  <div id="drawer-example" class="drawer" data-drawer-backdrop="false">
    <!-- 抽屉内容 -->
  </div>
  

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