0
505
ViewsHow 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>
·
Juan Pablo Isaza
1 answers
Answer question0
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
·
Juan Pablo Isaza
Report
Answer question