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 :

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

David Miller

David Miller

Executive Financial & Market Analyst

David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.

Share this article
Twitter Facebook Pinterest