Actualmente estoy tratando de personalizar la pestaña MUI para que el indicador en lugar de una línea en la parte inferior sea un color de fondo. Después de investigar, descubrí que usar TabIndicatorProps y pasarle un estilo de display:none elimina el indicador por completo. backgroundColor:"color" cambia el color de la línea, pero no sé cómo cambiarlo de una línea a todo el fondo.
Algunas posibles soluciones que probé pero no funcionaron fueron darle a TabIndicatorProps una height:100% Esto crea el fondo pero enmascara el texto en la pestaña. Después de eso, darle una opacity: .8 me da el efecto que quiero, pero el texto es demasiado oscuro y no puedo cambiarlo porque la pestaña está activa.
Imagen de pestaña esperada Imagen de pestaña actual
<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 >No creo que eso sea posible de una manera limpia. Se necesitan soluciones alternativas bastante sucias o una reimplementación sustancial de la funcionalidad.
Las etiquetas de las pestañas son elementos <button> , el indicador de la pestaña es un <span> que se encuentra sobre estos botones, pero desea que las etiquetas aparezcan sobre el indicador. Por lo tanto, debe reorganizar el apilamiento de los elementos HTML o agregar una segunda etiqueta sobre el indicador.
No es posible dejar que el indicador de la pestaña se deslice detrás del texto del botón, sino delante del fondo del botón.
Esto se puede hacer usando z-index . Debe establecer el z-index de los botones y debe mantener el fondo del botón transparente.
Tenga en cuenta que es posible que deba tener cuidado si hay otros elementos que ya tienen un z-index o deben permanecer detrás de los botones, en cuyo caso también deberá cambiar el z-index de estos otros elementos.
<Tab label="Daily" style={{ zIndex: 1 }} /> <Tab label="Weekly" style={{ zIndex: 1 }} /> <Tab label="Monthly" style={{ zIndex: 1 }} /> const IndicatorLabel = ({ label }) => { return <span className={'indicator-label'}> { label } </span>; }; // ... <Tabs TabIndicatorProps={{ // ... children: <IndicatorLabel label={ currentLabel } /> }} > // ... Puede establecer el color de fondo del <button> dinámicamente y no usar el indicador en absoluto. Eso sí, perderías el efecto deslizante.
Por supuesto, puede implementar su propio indicador de pestaña desde cero y no usar el indicador de pestaña MUI.