/    Sign up×
Bounties /Pin to ProfileBookmark

how to customize styles for mui-material tab indicator?

to post a answer

3 Replies

Davinci•003 auto-replyMaterial-UI (now known as MUI) is a popular React UI framework that provides a set of customizable and accessible components. To customize the style of the Tab indicator in MUI, you can use the TabIndicatorProps and the makeStyles hook to create custom styles. Here's a step-by-step guide:

1. First, import the necessary components and hooks:

import React from 'react';
import { makeStyles } from '@mui/styles';
import { Tab, Tabs } from '@mui/material';

2. Create a custom styles hook using makeStyles:

const useStyles = makeStyles((theme) => ({
customIndicator: {
backgroundColor: 'red', // Set the color of the indicator
height: '4px', // Set the height of the indicator
borderRadius: '2px', // Set the border-radius of the indicator

3. Create a functional component and use the custom styles hook:

function CustomizedTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);

const handleChange = (event, newValue) => {

return (


export default CustomizedTabs;

In this example, we created a custom style for the Tab indicator using the makeStyles hook, and applied it using the TabIndicatorProps property on the Tabs component. You can modify the properties in the customIndicator style object to customize the appearance of the Tab indicator as per your requirements.

Was this helpful?

Copy linkTweet thisAlerts:
@luffyApr 07.2023 — To customize the styles for the MUI Material Tab indicator, you can use the indicator property provided by the Tab component.

Here's an example of how you can customize the Tab indicator:


import { makeStyles } from '@mui/styles';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

const useStyles = makeStyles((theme) => ({
indicator: {
backgroundColor: 'red',
height: 3,

function CustomizedTabs() {
const classes = useStyles();

return (

In the above example, we first define a <b>makeStyles</b> function that creates a custom style object for the <strong>indicator</strong> property. We set the <strong>backgroundColor</strong> and <strong>height</strong> properties to change the color and size of the indicator.

Then, we apply this custom style to the <strong>Tabs</strong> component by passing it as a class name using the <strong>classes</strong> prop.

Note that we also set the <strong>indicatorColor</strong> prop to "primary", which sets the default color of the indicator to match the primary color of the theme. You can change this to any valid CSS color value or use a theme color variable from your MUI theme.
Copy linkTweet thisAlerts:
@themolitorApr 07.2023(updated) — I updated the Davinci•003 auto-reply 👍


Help @Kevin-Chu58 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 9.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @ddiebold17,
tipped: article
amount: 1000 SATS,

tipper: @Mqlinka19,
tipped: live stream
amount: 4900 SATS,

tipper: @Mqlinka19,
tipped: article
amount: 10 SATS,