DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Chakra UI: Theme - Update Tab style
Ekim Kael
Ekim Kael

Posted on

Chakra UI: Theme - Update Tab style

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>
Enter fullscreen mode Exit fullscreen mode

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',
            },
          },
        },
      },
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

πŸŽ‰

Screen Shot 2021-09-05 at 08.53.43

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›