How to change background color of active Navigation Tab?

Question

I have Navigation Tab of material-ui used for my React Project.The selected active Tab must have background color and then switch back to original color when not active.The transparent is applied to both tabs and not the selected active tabs in the below code.I want to apply some background color for active tabs only. Any solution?

Here is the code for Navigation Tab

import React from 'react';
import PropTypes from 'prop-types';
import SwipeableViews from 'react-swipeable-views';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import ForecastDays from '../forecast/index';

const TabPanel = (props) => {
  const { children, value, index, ...other } = props;

  return (
    <Typography
      component="div"
      role="tabpanel"
      hidden={value !== index}
      id={`full-width-tabpanel-${index}`}
      aria-labelledby={`full-width-tab-${index}`}
      {...other}
    >
      <Box p={3}>{children}</Box>
    </Typography>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};

const a11yProps = (index) => {
  return {
    id: `full-width-tab-${index}`,
    'aria-controls': `full-width-tabpanel-${index}`
  };
}

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: 'none',
    width: 275,
    marginLeft:72,
    marginTop:40
  },
}));

const DailyHourly = (props) => {
  const classes = useStyles();
  const theme = useTheme();
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleChangeIndex = index => {
    setValue(index);
  };

  const {forecastdays, hourlyforecast} = props

  return (
    <div className={classes.root}>
      <AppBar   position="static" color="default" style={{background: 'transparent'}}>
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="secondary"
          textColor="primary"
          variant="fullWidth"
          aria-label="full width tabs example"
        >
          <Tab label="Daily" {...a11yProps(0)}
          />
          <Tab label="Hourly" {...a11yProps(1)}
          />
        </Tabs>
      </AppBar>
      <SwipeableViews
        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
        index={value}
        onChangeIndex={handleChangeIndex}
      >
        <TabPanel value={value} index={0} dir={theme.direction}>
            <ForecastDays forecastdays={forecastdays}/>
        </TabPanel>
        <TabPanel value={value} index={1} dir={theme.direction}>
            <ForecastDays hourlyforecast={hourlyforecast}/>
        </TabPanel>
      </SwipeableViews>
    </div>
  );
}

export default DailyHourly

Watch out images for reference below. Any suggestions highly appreciated... Thanks in advance

Answer 1

You can add a class based on the current active tab value. Something like below. You may have to create another function, if you don't know the number of tabs beforehand.

 <Tab className={value === 0 ? classes.active : ""} label="Daily" {...a11yProps(0)}
  />
  <Tab className={value === 1 ? classes.active : ""} label="Hourly" {...a11yProps(1)}
  />

Codesandbox - https://codesandbox.io/s/pedantic-ives-t7sir