react-bootstrap: Tab's tabClassName attribute overriden by default
<p>I am using react-bootstrap, specifically  Tabs and Tab. Tab has a built-in attribute <a href="https://react-bootstrap.github.io/components.html#tabs-props-pane" rel="nofollow noreferrer">tabClassName</a> that takes a string. The instructions for usage are "tabClassName is used as className for the associated NavItem". </p>

<p>So I set <code>&lt;Tab tabClassName="main-tab"&gt;</code>.</p>

<p>My goal is to remove the blue outline that appears when the tab is focused on. However, the following CSS does nothing.</p>

<pre><code>.main-tab, .main-tab:active, .main-tab:focus {
    outline: none !important;
}
</code></pre>

<p>Here is the site inspection:
<a href="https://i.stack.imgur.com/Mgu0y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mgu0y.png" alt="enter image description here"></a></p>

<p>How do I get rid of the blue focus outline?</p>