Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I change the color of the line under the active tab in Material-UI Tabs?

How can I remove the spinner buttons (up/down arrows) from a Material-UI TextField when the type="number" is used?

When I try to this css but this is not working then I can find new props and find mui classname then solve this issues

  <Tabs
      value={0}
      TabIndicatorProps={{
        style: {
          backgroundColor: 'red', // Change this to your desired color
        },
      }}
    >
      <Tab label="Tab 1" />
      <Tab label="Tab 2" />
      <Tab label="Tab 3" />
    </Tabs>
Tags:

2

Answers


  1. 0

    There are 2 props you can use as mentioned in the MUI docs textColor for text color and indicatorColor for the underlines as in your case you need the second one

    https://mui.com/material-ui/react-tabs/#colored-tab

    <Tabs
  value={0}
  textColor="inherit"
  indicatorColor="secondary"
>
  <Tab label="Tab 1" />
  <Tab label="Tab 2" />
  <Tab label="Tab 3" />
</Tabs>

    But note that this will only work for MUI’s predefined colors like primary/secondary. If you want to give a custom color use the below code

    import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';

export default function ColorTabs() {
    const [value, setValue] = React.useState('one');

    const handleChange = (event: React.SyntheticEvent, newValue: string) => {
        setValue(newValue);
    };

    const theme = createTheme({
        components: {
            MuiTabs: {
                styleOverrides: {
                    indicator: {
                        backgroundColor: 'red',
                    },
                },
            },
        },
    });

    return (
        <ThemeProvider theme={theme}>
            <Box sx={{ width: '100%' }}>
             <Tabs
                  value={value}
                  onChange={handleChange}
                  textColor="inherit"
                  aria-label="secondary tabs example"
              >
                  <Tab value="one" label="Item One" />
                  <Tab value="two" label="Item Two" />
                  <Tab value="three" label="Item Three" />
              </Tabs>
            </Box>
        </ThemeProvider>
  );
}
    Login or Signup to reply.
  2. 0

    In Material-UI, the tab indicator line can be customized using the TabIndicatorProps within the Tabs component. You can control its color by passing custom styles to the sx prop or using style for inline styling.

    TabIndicatorProps: This prop allows you to customize the tab indicator (the line below the selected tab).

    <Tabs
  value={0}
  TabIndicatorProps={{
    style: {
      backgroundColor: 'red', // Change this to your desired color
    },
  }}
>
  <Tab label="Tab 1" />
  <Tab label="Tab 2" />
  <Tab label="Tab 3" />
</Tabs>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search