如何覆盖 React Bootstrap 活动选项卡默认边框样式

Question

我正在尝试覆盖 React Bootstrap Tabs 组件的默认边框样式（宽度和颜色）。我特别遇到困难的部分是活动选项卡。此图片显示了我尝试操作的边框示例：

下面是我正在使用的代码示例：

<div>
    <Tabs
        className="customTabs"
        eventKey="example-key"
        onSelect={selected => onTabSelect(selected)}
        >
        <Tab
            title="a"
            eventKey="tab1"
            />
        <Tab
            title="b"
            eventKey="tab2"
            />

    </Tabs>
</div>
 
// Styling using Sass

.customTabs {
    li.active {
        border: 2px solid blue;
    }
}

基于开发人员工具，我有兴趣更改的边框似乎是：.nav-tabs > li.active（nav-tabs 是默认的引导类）。

关于我如何克服这个问题有什么建议吗？

目前，除了 li.active > a, .nav > li.active 之外，我还尝试了上述方法...除了类选择器之外，我还使用了 id 选择器。

Answer 1

我忽略了我们正在使用 CSS 模块这一事实，因此我需要使用 :global。更棘手的部分是确保我的子边框覆盖父边框。

:global {

.nav-tabs {

    opacity: 0.8;

    border-bottom: 2px solid black;

    li {

        a {

            margin-right: 0;

            background: white;

        }

        &.active {

            border: 2px solid black;

            border-bottom: transparent;

            a {

                margin-bottom: -1px;

            }

        }

    }

}

}