Блог

У меня есть выбираемые значки пунктов меню в React с использованием пользовательского интерфейса Material с помощью cornerRadius :

 <Paper sx={{borderRadius: '25px'}}>
    <List component={Stack} direction="row">
        <ListItemButton>
            <CropSquareRounded />
        </ListItemButton>
        <ListItemButton>
            <CropSquareRounded />
        </ListItemButton>
        <ListItemButton>
            <CropSquareRounded />
        </ListItemButton>
    </List>
</Paper>
 

Когда курсор мыши наведен на элемент в этом меню, поле выбора не соответствует радиусу угла. Поле выбора по-прежнему прямоугольное.

смотрите квадратный угол при выборе

Как это исправить ?

Вы должны стилизовать hover свое состояние ListItemButton , чтобы достичь того, чего вы хотите:

 <ListItemButton
              sx={{
                "amp;:hover": {
                  borderRadius: "16px"
                }
              }}
            >
 

ДЕМОНСТРАЦИЯ