How to customize chakra ui tab element. in react

Question

i want to add tab eliments active style i saw they have used aria-selected:true to apply the css style in a class but i don't know how to override this style in react can anyone explain how can i overwrite this in react ? Please See the right down side. for the style they have used

.css-y2jimx[aria-selected=true], .css-y2jimx[data-selected] {
color: var(--chakra-colors-blue-600);
border-color: currentColor;}

I want to overwrite this code in my react element like this

 <Tab style={
          aria-selected? 'selected style':'not selected style'
        }     
      >Basics</Tab>

Answer 1

Chakra-UI is very well documented, you'll find all you need on this page : https://chakra-ui.com/docs/components/disclosure/tabs .

First choose your variant , then your colorScheme . At last you will maybe need the _selected props for the final touch : https://chakra-ui.com/docs/components/disclosure/tabs#styling-the-tab-states-via-props