title: How I can customize antd tab active bottom tab bar color
body: <p>I want to change bottom tab bar color same as tab heading. I have tried several methods but unable to succeed.</p>
  <p><strong>My Code:</strong></p>
  <pre><code>export default function OurPhilosophy() {
  
   return (
       &lt;Container maxWidth=&quot;lg&quot; className=&quot;our-philosophy&quot;&gt;
           &lt;h3 className=&quot;heading1&quot;&gt;Our Philosophy&lt;/h3&gt;
  
           &lt;Demo /&gt;
       &lt;/Container&gt;
   )
  } 
  
  const Demo = () =&gt; (
   &lt;Tabs defaultActiveKey=&quot;1&quot; size=&quot;large&quot;&gt;
       &lt;TabPane tab=&quot;Heading 1&quot; key=&quot;1&quot;&gt;
           &quot;Content&quot;
       &lt;/TabPane&gt;
       &lt;TabPane tab=&quot;Heading 2&quot; key=&quot;2&quot;&gt;
           &quot;Content&quot;
       &lt;/TabPane&gt;
       &lt;TabPane tab=&quot;Heading 3&quot; key=&quot;3&quot;&gt;
           &quot;Content&quot;
       &lt;/TabPane&gt;
       &lt;TabPane tab=&quot;Heading 4&quot; key=&quot;4&quot;&gt;
           &quot;Content&quot;
       &lt;/TabPane&gt;
   &lt;/Tabs&gt;
  );
  </code></pre>
  <p><strong>Screen:</strong></p>
  <p><a href="https://i.stack.imgur.com/G3sOR.png" rel="nofollow noreferrer">enter image description here</a></p>