title: Custom style of React-tabs
body: <p>I'm using ready-made tab component from <a href="https://github.com/reactjs/react-tabs" rel="nofollow noreferrer">https://github.com/reactjs/react-tabs</a> .
  It is working fine, but I'm a bit stuck with customising the styles. I'm not experienced in React so I'm a bit lost and I don't know where to start from because the styles are now resolved by adding classes rignt to the elements of the component (see code below).</p>
  <p>This is what I want to achieve: the tab selected changes color
  <a href="https://i.stack.imgur.com/TaOuY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TaOuY.jpg" alt="This is what I want to achieve: the tab selected changes color" /></a></p>
  <p>This is what I've got: all tabs are grey
  <a href="https://i.stack.imgur.com/ruxAg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ruxAg.jpg" alt="This is what I've got: all tabs are grey" /></a></p>
  <p>I.e. what I need is when I click Tab 1, it goes white, and if I click then Tab 2, Tab 1 goes grey and Tab 1 becomes white.</p>
  <p>I was able to set the default selected tab by onChange event (now it's Tab 2), I styled react-tabs__tab--selected in css file, but I'm lacking connection somehow, my tabs are all grey all the time.</p>
  <pre><code>const [tabIndex, setTabIndex] = useState(1);
  
  ...
  return ( ...
  &lt;Tabs selectedIndex={tabIndex} onSelect={(index) =&gt; setTabIndex(index)} id=&quot;controlled-tabs&quot;&gt;
      &lt;TabList className=&quot;my-6 flex flex-col sm:flex-row sm:justify-between sm:items-center &quot;&gt;
              &lt;Tab
                key=&quot;tab1&quot;
                
                className=&quot;cursor-pointer py-4 px-8 bg-grey-background border border-grey-intermediate flex flex-grow&quot;&gt;
                Tab 1
  
              &lt;Tab
                key=&quot;tab2&quot;
                
                className=&quot;cursor-pointer py-4 px-8 bg-grey-background border border-grey-intermediate flex flex-grow&quot;&gt;
                Tab 2
              &lt;/Tab&gt;
  
              &lt;Tab
                key=&quot;tab3&quot;
              
                className=&quot;cursor-pointer py-4 px-8 bg-grey-background border border-grey-intermediate flex flex-grow&quot;&gt;
                Tab 3
              &lt;/Tab&gt;
            &lt;/TabList&gt;
  ....
  &lt;/Tabs&gt;
  
  </code></pre>