Source:  Twitter logo

I'm trying to set the position of the indicator to the top of TAB instead of the bottom like:

I checked and tried to update CSS but it didn't work. I'm new to react so I couldn't customize the components.

I create an example in codesandbox that I share with you.

https://codesandbox.io/s/usage-p0y9t?file=/index.js

You can pass to Tabs the property classes to override internal classes. In this case you can pass a new class to the indicator and override his style. Take a look at the link below

https://material-ui.com/api/tabs/#css

7 users liked answer #0dislike answer #07
Marco Moretti profile pic
Marco Moretti

2022 Solution

https://mui.com/styles/basics/

@mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

⚠️ @mui/styles is not compatible with React.StrictMode or React 18.

You can utilise the sx property on the component to access any css classes directly.

https://mui.com/api/tabs/#css

<Tabs
  orientation="vertical"
  value={value}
  onChange={handleChange}
  sx={{
    '.MuiTabs-indicator': {
      left: 0,
    },
  }}
>
  <Tab label="One" />
  <Tab label="Two" />
  <Tab label="Three" />
</Tabs>
6 users liked answer #1dislike answer #16
Xavier profile pic
Xavier

To reinforce @Xavier 's answer, I found that we could use the TabIndicatorProps prop for Tabs component as below.

<Tabs
   TabIndicatorProps={{
      sx: {          
         top: 0
      }
    }}
  >
  <Tab label="One" />
  <Tab label="Two" />
  <Tab label="Three" />
</Tabs>
5 users liked answer #2dislike answer #25
woniok profile pic
woniok

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).