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://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.
<Tabs
orientation="vertical"
value={value}
onChange={handleChange}
sx={{
'.MuiTabs-indicator': {
left: 0,
},
}}
>
<Tab label="One" />
<Tab label="Two" />
<Tab label="Three" />
</Tabs>
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>