Блог

Я хочу, чтобы элемент ListItemSecondaryAction с классом actions был скрыт при наведении курсора мыши на ListItem с классом friendsListItem.

Я пробовал использовать устаревший селектор в styles, но это не работает.

 const styles = (theme) => ({
  friendsListItem: {
    'amp;:hover $actions': {
      visibility: 'hidden'
    },
  },
  actions: {},
  iconButton: {},
  moreVertIcon: {},
});
  

       <List>
          <ListItem button key="Joe" className={classes.friendsListItem}>
              <ListItemSecondaryAction className={classes.actions}>
                <IconButton className={classes.iconButton}>
                  <MoreVertIcon className={classes.moreVertIcon}/>
                </IconButton>
            </ListItemSecondaryAction>
          </ListItem>
      </List>
  

При необходимости вставьте весь код целиком: https://pastebin.com/4neuJRki

Я ожидал бы, что ListItemSecondaryActions исчезнет при наведении курсора на ListItem, но ничего не произошло.

При использовании ListItemSecondaryAction это изменяет структуру li элемента несколько неожиданным образом.

Без дополнительного действия у вас будет структура, подобная следующей:

 <li class="list-item-classname">
   whatever is in your ListItem
</li>
  

но с вторичным действием вы получаете нечто большее, чем:

 <li class="container-classname">
   <div class="list-item-classname">
      whatever is in your ListItem
   </div>
   <div class="secondary-action-classname">
      whatever is in your secondary action
   </div>
</li>
  

Важная часть, на которую следует обратить внимание в приведенной выше структуре, заключается в том, что класс ListItem применяется к брату вторичного действия, а не к предку. Чтобы применить класс к родительскому li элементу, вам необходимо указать container класс.

Из https://material-ui.com/api/list-item/#css:

контейнер — Стили, применяемые к container элементу, если children он включает ListItemSecondaryAction .

Вот синтаксис для этого:

         <ListItem
          button
          key="Joe"
          classes={{ container: classes.friendsListItem }}
        >