How to customize chakra ui tab element. in react

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>

1 Answer

Chakra-UI is very well documented, you'll find all you need on this page : .

First choose your variant, then your colorScheme. At last you will maybe need the _selected props for the final touch :