Customize Tab indicator styling in Material-UI

Question

Customize Tab indicator styling in Material-UI

Currently, I am attempting to customize the MUI tab by changing the indicator from a line to a background color. Through my research, I discovered that using TabIndicatorProps and setting a style of display:none eliminates the indicator completely. However, when I try

backgroundColor:"color"

, the line color changes but I'm struggling to make it span the entire background instead of just a line.

I experimented with some potential solutions, such as adding height:100% to the TabIndicatorProps, which resulted in creating the background but obscured the text within the tab. Likewise, applying opacity: .8 gave me the desired effect, but the text became too dark and I was unable to adjust it for active tabs.

Expected Tab Image Current Tab Image

<Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
            <Tabs TabIndicatorProps={{
                style: {
                    backgroundColor: '#D2603D',
                    borderRadius: '5px',
                },
            }} value={value} onChange={handleChange}>
                <Tab textColor='blue' onClick={handleClick} sx={{
                    backgroundColor: '#F4F5F9',
                    borderRadius: '5px',

                }} label="Daily" />
                < Tab sx={{
                    backgroundColor: '#F4F5F9',

                }} label="Weekly" />
                <Tab sx={{
                    backgroundColor: '#F4F5F9',
                    borderRadius: '5px'
                }} label="Monthly" />
            </Tabs>
        </Box >

javascript css reactjs material-ui frontend

Answer 1

Answer №1

It doesn't seem feasible to achieve this in a straightforward manner. Options include resorting to less elegant solutions or completely revamping the functionality.

The tab labels are represented by <button> elements, while the tab indicator is a <span> positioned above these buttons. If you want the labels to appear above the indicator, you will need to either rearrange the hierarchy of HTML elements or introduce a secondary label above the indicator.

Unfortunately, it's not possible for the tab indicator to slide behind the button text but in front of the button background.

Here are some suboptimal ("dirty") workarounds:

You can rearrange the stacking order of the HTML elements.

This can be achieved using the z-index property. You have to assign specific z-index values to the buttons and ensure that the button backgrounds remain transparent.

Take caution if there are other elements with existing z-index values or if they need to stay behind the buttons; in such cases, their z-index values might also need adjustment.

<Tab label="Daily" style={{ zIndex: 1 }} />
<Tab label="Weekly" style={{ zIndex: 1 }} />
<Tab label="Monthly" style={{ zIndex: 1 }} />

You could append the current label as a child of the tab indicator, matching its style with the original label. Additionally, you would need to pass the current label so that it moves with the indicator or remains empty during sliding.

const IndicatorLabel = ({ label }) => {
  return <span className={'indicator-label'}>
    { label }
  </span>;
};

// ...

<Tabs
  TabIndicatorProps={{
    // ...
    children: <IndicatorLabel label={ currentLabel } />
  }}
>

// ...

You could dynamically set the background color of the <button>, bypassing the use of the indicator altogether. However, this approach sacrifices the sliding effect.
Alternatively, you could create your own custom tab indicator from scratch instead of relying on the MUI tab indicator.

Answer 2

It doesn't seem feasible to achieve this in a straightforward manner. Options include resorting to less elegant solutions or completely revamping the functionality.

The tab labels are represented by <button> elements, while the tab indicator is a <span> positioned above these buttons. If you want the labels to appear above the indicator, you will need to either rearrange the hierarchy of HTML elements or introduce a secondary label above the indicator.

Unfortunately, it's not possible for the tab indicator to slide behind the button text but in front of the button background.

Here are some suboptimal ("dirty") workarounds:

You can rearrange the stacking order of the HTML elements.

This can be achieved using the z-index property. You have to assign specific z-index values to the buttons and ensure that the button backgrounds remain transparent.

Take caution if there are other elements with existing z-index values or if they need to stay behind the buttons; in such cases, their z-index values might also need adjustment.

<Tab label="Daily" style={{ zIndex: 1 }} />
<Tab label="Weekly" style={{ zIndex: 1 }} />
<Tab label="Monthly" style={{ zIndex: 1 }} />

You could append the current label as a child of the tab indicator, matching its style with the original label. Additionally, you would need to pass the current label so that it moves with the indicator or remains empty during sliding.

const IndicatorLabel = ({ label }) => {
  return <span className={'indicator-label'}>
    { label }
  </span>;
};

// ...

<Tabs
  TabIndicatorProps={{
    // ...
    children: <IndicatorLabel label={ currentLabel } />
  }}
>

// ...

You could dynamically set the background color of the <button>, bypassing the use of the indicator altogether. However, this approach sacrifices the sliding effect.
Alternatively, you could create your own custom tab indicator from scratch instead of relying on the MUI tab indicator.

Answer 3

Answer №2

Even though this may seem outdated, it could still be useful for anyone who is searching for a solution.

In MUI5, you can customize Tabs with styles using the code snippet below:

import { Tabs as MuiTabs } from '@mui/material';
import { styled } from '@mui/material';

const Tabs = styled(MuiTabs)(({ theme }) => ({
    '& .MuiTab-root': {
        margin: "8px 5px 8px 5px",
        borderRadius: "6px",
        lineHeight: 0,
        minHeight: "unset",
        padding: "16px",
        color: "grey",
        fontWeight: 700,
    },
    '& .MuiTab-root.Mui-selected': {
        backgroundColor: "#ff7100",
        fontWeight: 700,
        color: "white"
    }
}));

export default Tabs

Answer 4

Even though this may seem outdated, it could still be useful for anyone who is searching for a solution.

In MUI5, you can customize Tabs with styles using the code snippet below:

import { Tabs as MuiTabs } from '@mui/material';
import { styled } from '@mui/material';

const Tabs = styled(MuiTabs)(({ theme }) => ({
    '& .MuiTab-root': {
        margin: "8px 5px 8px 5px",
        borderRadius: "6px",
        lineHeight: 0,
        minHeight: "unset",
        padding: "16px",
        color: "grey",
        fontWeight: 700,
    },
    '& .MuiTab-root.Mui-selected': {
        backgroundColor: "#ff7100",
        fontWeight: 700,
        color: "white"
    }
}));

export default Tabs

Customize Tab indicator styling in Material-UI

Answer №1

Here are some suboptimal ("dirty") workarounds:

Answer №2

Similar questions

Exploring the hidden contents within the zip file

Listen for the load event during an AJAX request without using jQuery's add

The JavaScript function is not being activated by clicking on Selenium in Chrome

Initial argument for the event listener

Multiple callbacks triggered by jQuery CSS transitions

Conceal additional recipients in the "to" address field when sending emails with Node.js using Nodemailer

Seeking Up/Down Arrows HTML numerical input feature specifically designed for iOS devices

Navbar optimization by eliminating unnecessary whitespace at the end

Having trouble getting the form to submit with jQuery's submitHandler

Gaining access to the isolated scope of a sibling through the same Angular directive led to a valuable discovery

I am currently working on updating row values within the MUI datagrid using the processRowUpdate property. However, I have encountered an issue where I am only able to retrieve the most recently updated cell value

In my Vue project, I am required to extract only the numerical value from a select option text and disregard the rest of the text

Locate and substitute `?php` and `?` in a given string

JavaScript Promise Chains- Issues with Functionality?

How to update the state in react-native using asynchronous functions and the async/

Leverage variable references in custom themes with React and Material-UI

What is the best way to select and link a specific section of a string using Javascript?

Trigger JavaScript function once all Ajax requests have completed

The React component is failing to display updated data from the Redux store

The constructor error in ng-serve signalizes an issue in