Target another component on hover in Emotion/styled MaterialUi

Question

I have a Drawer Component from MUI and i style it using styled imported from import { styled } from "@mui/material/styles";

How do i target ListButton from ListItem?

const ListButton = styled(ListItemButton)<StyledListItemButtonProps>(
  ({ theme }) => ({
    padding: 14,
    borderRadius: 8,
    minHeight: 48,
    justifyContent: "center",
  })
);

const TheListItem = styled(ListItem)(({ theme }) => ({
  display: "flex",
  ":hover": {
    ListButton: {
      backgroundColor: "rgba(255,255,255,0.05)",
      ".MuiListItemIcon-root": {
        svg: {
          fill: theme.palette.primary.main,
        },
      },
    },
  },
}));

This is not working.

P.s i dont want to import it from '@emotion/styled'

Answer 1

To use components as selectors you should install @emotion/babel/plugin.

If you want to import styled from "@mui/material/styles", you'll probably have to add an import map to provide different imports for the styled utility.

There is a working codesandbox in this github issue