Tengo un problema extraño en el que la primera pestaña no se muestra correctamente. Experimenté y agregué una segunda pestaña, que aparece bien. Básicamente hice que la segunda pestaña tuviera lo que quería que tuviera la primera pestaña. Como pensé que podría haber cometido un error, eliminé la primera pestaña y solo hice que la segunda pestaña fuera la primera pestaña... solo para que no apareciera. Aquí está mi código:
<Tabs value={value} onChange={handleChange} indicatorColor="primary" className={classes.tabContainer} > <Tab label="Today's Picture" /> <Tab className={classes.tab} label="Today's Picture" component={Link} onClick={refreshPage} to="/" /> <BasicDatePicker date={props.date} setDate={props.setDate} /> </Tabs>La primera pestaña fue cuando experimenté para ver si se mostraba, la segunda pestaña es lo que quiero que aparezca como la primera pestaña. Lo extraño que sucedía es que cuando no mostraba mi primera pestaña, al menos al pasar el mouse sobre ella, se mostraba el estilo que había configurado, pero al no pasar el mouse sobre ella, parecía que no había nada allí.
He copiado este código del sitio de material UI y funcionará bien, intente esto:
function TabPanel(props) { const { children, value, index, ...other } = props; return ( <div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other} > {value === index && ( <Box sx={{ p: 3 }}> <Typography>{children}</Typography> </Box> )} </div> ); } TabPanel.propTypes = { children: PropTypes.node, index: PropTypes.number.isRequired, value: PropTypes.number.isRequired, }; function a11yProps(index) { return { id: `simple-tab-${index}`, 'aria-controls': `simple-tabpanel-${index}`, }; } export default function BasicTabs() { const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => { setValue(newValue); }; return ( <Box sx={{ width: '100%' }}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Tabs value={value} onChange={handleChange} aria-label="basic tabs example"> <Tab label="Item One" {...a11yProps(0)} /> <Tab label="Item Two" {...a11yProps(1)} /> <Tab label="Item Three" {...a11yProps(2)} /> </Tabs> </Box> <TabPanel value={value} index={0}> Item One </TabPanel> <TabPanel value={value} index={1}> Item Two </TabPanel> <TabPanel value={value} index={2}> Item Three </TabPanel> </Box> ); }Lo descubrí, una vez que cambié esto:
<Tab className={classes.tab} label="Today's Picture" component={Link} onClick={refreshPage} to="/" />a esto:
<Tab className={classes.tab} value="Today's Picture" label="Today's Picture" component={Link} onClick={refreshPage} to="/" />Básicamente tuve que agregar una línea de valor en mi Tab. Una vez que hice eso, ¡funcionó según lo previsto!