One of the challenges I am facing in my React Project is with the Navigation Tab from material-ui. The issue I encounter is that the active tab should have a background color, and then revert to its original color when not active. However, the transparency applied affects both tabs instead of just the selected active tab. I am looking for a solution to apply a background color only to the active tabs. Any ideas?
Below is the code snippet for the 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
Please see the images below for reference. Any recommendations are greatly appreciated. Thank you!
https://i.stack.imgur.com/Tg7kRS.jpg https://i.stack.imgur.com/nxCfN.jpg