Chakra UI: Theme - Update Tab style

#react #styledcomponent #emotion

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',
            },
          },
        },
      },
    },
  },
});

🎉