I've made the decision to transition from using makeStyles to utilizing styled in Material-UI v5 for styling, as it's considered the "preferred" method. While makeStyles is still functional, I want to embrace the newer styling solution.
In my navigation list of items, I aim to highlight the currently selected item. Previously, I achieved this using makeStyles:
interface ListItemLinkProps {
label: string;
to: string;
}
const useStyles = makeStyles<Theme>(theme => ({
selected: {
color: () => theme.palette.primary.main,
},
}));
const ListItemLink = ({ to, label, children }: PropsWithChildren<ListItemLinkProps>) => {
const styles = useStyles();
const match = useRouteMatch(to);
const className = clsx({ [styles.selected]: !!match });
return (
<ListItem button component={Link} to={to} className={className}>
<ListItemIcon>{children}</ListItemIcon>
<ListItemText primary={label} />
</ListItem>
);
};
(I'm utilizing clsx to determine when to apply the selected style to the ListItem element.)
Now, I'm exploring how to implement this using styled. Here's what I have so far:
const LinkItem = styled(ListItem, {
shouldForwardProp: (propName: PropertyKey) => propName !== 'isSelected'
})<ListItemProps & LinkProps & { isSelected: boolean }>(({ theme, isSelected }) => ({
...(isSelected && { color: theme.palette.primary.main }),
}));
const ListItemLink = ({ to, label, children }: PropsWithChildren<ListItemLinkProps>) => {
const match = useRouteMatch(to);
return (
// @ts-ignore
<LinkItem button component={Link} to={to} isSelected={!!match}>
<ListItemIcon>{children}</ListItemIcon>
<ListItemText primary={label} />
</LinkItem＞
);
};
Here are my questions regarding this implementation:
Is this the most effective way to apply conditional styles?
I'm struggling with defining the proper types for the
styleddeclaration - hence why I had to include the// @ts-ignorecomment above theLinkItem.