[RFC] standardize & document optimal styling method: class vs ownerState

What's the problem? 🤔

For Material, ListItemButton uses &.${listItemButtonClasses.selected} : https://github.com/mui/material-ui/blob/master/packages/mui-material/src/ListItemButton/ListItemButton.js#L77-L103

For Joy-UI, ListItemButton uses ...(ownerState.selected && {: https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/ListItemButton/ListItemButton.tsx#L87-L98

What are the requirements? ❓

It seems as if using the class styling might lead to fewer distinct styles, as I think the ownerState would result in a new distinct CSS class for selected items, replicating the CSS properties from the unselected item.

It'd be great if there was documentation about the optimal method to produce the most efficient CSS or the trade-offs of each.

What are our options? 💡

Both ownerState and the classes seem equally easy to use, so I think it ultimately comes down to which creates optimal CSS.

Proposed solution 🟢

• Determine if there's any benefit to one method over the other.
• Document said benefits/trade-offs.
• Standardize provided components with optimal method.

Resources and benchmarks 🔗

No response