I'm working on a project with Chakra UI where I need to create a navigation but it's more like tabs so I chose to use Chakra UI Tabs. I'm personally not a fan of the approach of writing CSS rules in components so I always prefer to modify the theme to fit my needs.
In this case, I really needed my Tabs to look like a classic navbar
so I took the unstyled
variant.
<Tabs variant="unstyled">
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
</TabPanels>
</Tabs>
And here is how to change the style of a Tab
in the theme
file 👇🏾
The first thing to note is that all child styles end up in Tabs.
So if you want to change Tablist
or TabPanel
, it will also be done in the Tabs attribute at the theme file.
export const theme = extendTheme({
Tabs: {
variants: {
unstyled: {
paddingY: '4',
marging: '0',
tab: {
_selected: {
color: 'white',
boxShadow: 'none',
},
},
},
},
},
},
});
🎉
Top comments (0)