Estoy codificando un sitio web de comercio electrónico básico usando NextJS y tengo un problema
Quiero tener una pestaña adhesiva en el medio de mi página pero, por alguna razón, la position: 'sticky' no funciona
este es mi codigo

 [other stuff here] <div className={classes.stickyTab}> <Grid style={{ backgroundColor: '#FFFFFF' }}> <div className={classes.outerTab}> <div className={classes.innerTab}> <div>Tab number 1</div> </div> </div> </Grid> <Grid style={{ backgroundColor: '#FFFFFF' }}> <div className={classes.outerTab2}> <div className={classes.innerTab2}> <div>Tab number 2</div> </div> </div> </Grid> </div> [other stuff here]

Y este es el styles.js

 stickyTab: { position: 'sticky', }, outerTab: { display: 'flex', paddingTop: 16, paddingRight: 16, paddingBottom: 16, paddingLeft: 16, }, innerTab: { fontSize: '20px', }, outerTab2: { position: 'relative', marginTop: 10, marginBottom: 10, }, innerTab2: { position: 'relative', marginLeft: 10, marginRight: 10, marginBottom: 10, },

Así es como se ve visualmente

Básicamente, todo lo que quiero es que mis 2 barras blancas estén pegajosas para que permanezcan en la pantalla cuando las pase. Todo lo que hice fue envolverlos a ambos dentro de un div y luego le di la position: 'sticky' pero como dije, no funcionó como pensé que lo haría. ¿Quizás me estoy perdiendo algo aquí?
Cualquier ayuda sería muy apreciada, gracias.