jitsi-meet
jitsi-meet copied to clipboard
Migrating away @mui/styles
Hello,
This PR follows up on #12544, addressing the continued use of withStyles
from the now-deprecated @mui/styles
in Jitsi-meet. It eliminates all remaining dependencies on @mui/styles
by transitioning to the tss-react
implementation of the withStyle
API.
With this migration, Jitsi Meet will solely rely on Emotion as its CSS engine, moving away from a dual-engine approach where Emotion managed MUI's internal styles and custom styles written with makeStyles
, while withStyles
custom component styles were handled by JSS.
Additionally, this update enhances type safety and ensures better control over the order of class application: classes specified later in the clsx()
list will have higher priority.
It's important to note that clsx
should be used exclusively in components employing withStyles
. Components using makeStyles
should combine classes using const { cx } = useStyles()
to maintain priority. withStyles
can safely utilize clsx
because cx
is internally invoked by TSS to preserve priority hierarchies.
Further enhancements to developer experience (DX) could include:
- Naming the
makeStyles
andwithStyle
stylesheets for easier traceability from HTML to source CSS. - Transitioning
makeStyles
to TSS's modern API, which is similar tomakeStyles
but easier to use. See TSS Documentation for more details.
These improvements were not included in this PR to minimize changes, but I am open to implementing these suggestions if desired.
Best regards,