如何摆脱 React-Bootstrap 下拉按钮框阴影？答案

【问题标题】：How to get rid of React-Bootstrap Dropdown Button box-shadow?如何摆脱 React-Bootstrap 下拉按钮框阴影？
【发布时间】：2022-08-17 05:54:31
【问题描述】：

当我单击它时，我试图摆脱引导下拉按钮上的框阴影或第二个边框。

我找不到哪个班级做出了这种改变。

标签： bootstrap-4 react-bootstrap bootstrap-5

【解决方案1】：

按钮在焦点上获得适当的 ":focus" 类，这会添加框阴影：

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

要停用此行为，请将“box-shadow”css 属性设置为“none”。有一个名为“shadow-none”的实用程序引导类，它的作用相同：https://getbootstrap.com/docs/5.1/utilities/shadows/

【讨论】：

【解决方案2】：

Igor 的努力让我走上了正轨，但我想补充一些细节。

目前，react-bootstrap 库需要盒子-shadow 要在其 DropdownButton 组件上进行更改。而且，虽然有一个 shadow-none 可用于普通按钮，但没有 box-shadow-none sass 变量 (link) 可用于 DropdownButton 组件。希望他们会添加这个。但在那之前...

最好像这样制作一个自定义类：

.no-focus-dropdown-button {
  :focus {
    box-shadow: none !important; // must use !important to override
  }
}

然后在组件的类中使用它，如下所示：

<DropdownButton
title="Dropdown Button"
className="no-focus-dropdown-button"
>
  {DropdownItems()} // with your items here
</DropdownButton>

【讨论】：