I am working on a MUI TreeView component that includes Categories as parents and Articles as children. Whenever I select a child item, it gets styled with a "selected" status. However, when I click on a parent item, the previously selected child loses its "selected" styling.
Is there a way to differentiate between a "child selected" state and a "parent clicked (selected)" state? I would like to achieve this using only CSS if possible. The project is built using Next.js.
Here is the CSS for CategoryItem:
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',
},
},
}));
And here is the CSS for ArticleItem:
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,
},
},
}));