DEV Community

Cover image for Chakra UI: Theme - Update Tab style
Ekim Kael
Ekim Kael

Posted on

4 2

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)

nextjs tutorial video

Youtube Tutorial Series πŸ“Ί

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series πŸ‘€

Watch the Youtube series

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay