por lo que el estilo en la propiedad css={{....}} se aplica en mi navegador, pero no en Safari en mi iPhone. ¿Cómo agrego estilo para iOs Safari, y también cómo puedo hacerlo, para que la barra de desplazamiento no desaparezca y esté siempre visible?

El único estilo que parece aplicarse en iPhone es el witdh webkit-scrollbar-track. (lo probé estableciendo el ancho en 100 px)

Ya probé this y this , para que la barra de desplazamiento esté siempre visible, pero sin éxito. A continuación se muestra el código y las imágenes del componente de desplazamiento en iPhone y Google Chrome en mi Mac.

También intenté usar ambos sx={{....}} css={{....}} durante la prueba. Pero no hay diferencia.

 <MenuList variant={"outline"} bgColor={"#000000"} rounded={10} borderColor={"blue.200"} > <Box css={{ "&::-webkit-scrollbar": { width: "4px", }, "&::-webkit-scrollbar-track": { width: "6px", }, "&::-webkit-scrollbar-thumb": { background: "#8ccef0", borderRadius: "24px", }, }} overflowX="auto" maxHeight="200px" > {coinsList .map(({ label, path }) => ( <MenuItem pt={1} pb={1} key={path} as={Link} to={path} color={dropDownValue === label ? undefined : "blue.200"} > {label} </MenuItem> ))} </Box> </MenuList>

Menú en Google Chrome en mi Mac. Manillar siempre visible y estilizado (color azul):

Menú en Safari en mi iPhone. El manillar solo es visible mientras se desplaza y no tiene estilo (color gris, más delgado, solo se aplica el estilo de ancho de pista):

[

[EDITAR] Mientras miraba las imágenes después de publicar la pregunta, noté que todo el menú está gris en la imagen móvil. Esto se debe a que envié la imagen a mi Mac usando Telegram. En realidad, es del mismo color azul que la imagen de Chrome, excepto por el manillar (solo como aclaración).