Tengo un componente MUI TreeView con un mapeo anidado de categorías (principal) y artículos (secundario). Cuando selecciono un niño, ese niño tiene estilos aplicados en función de "seleccionado". Cuando hago clic en un padre, el hijo anterior pierde sus estilos "seleccionados".

¿Cómo puedo diferenciar entre "hijo seleccionado" y "padre en el que se hizo clic (seleccionado)".

Preferiría hacer todo esto en CSS si es posible. Esta es una aplicación Next.js.

Mi categoríaItem CSS:

 const StyledCategoryItemRoot = styled(TreeItem)(({ theme }) => ({ [`& .${treeItemClasses.content}`]: { fontWeight: theme.typography.fontWeightBold, marginBottom: 5, paddingLeft: 0, borderRadius: theme.shape.borderRadius, '&.Mui-selected.Mui-focused, &:hover, &.Mui-selected:hover': { backgroundColor: theme.palette.mode === 'light' ? alpha('#ff9aff', 0.16) : alpha('#2f506f', 0.24), }, '&.Mui-selected, &.Mui-focused': { backgroundColor: 'transparent', }, }, }));

CSS de mi artículo:

 const StyledArticleItemRoot = styled(TreeItem)(({ theme, router, post }) => ({ color: theme.palette.mode === 'light' ? theme.palette.grey[900] : theme.palette.grey[500], [`& .${treeItemClasses.content}`]: { fontWeight: theme.typography.fontWeightBold, paddingLeft: 0, borderRadius: theme.shape.borderRadius, transition: '.2s', '&.Mui-selected:hover, &.Mui-selected.Mui-focused:hover, &:hover': { color: theme.palette.mode === 'light' ? theme.palette.grey[800] : 'white', }, '&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused': { backgroundColor: theme.palette.mode === 'light' ? alpha('#ff9aff', 0.16) : alpha('#2f506f', 0.16), color: post.attributes.slug !== router.query.slug ? theme.palette.grey[500] : theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.secondary.main, }, }, }));