jitsi-meet icon indicating copy to clipboard operation
jitsi-meet copied to clipboard

Migrating away @mui/styles

Open garronej opened this issue 5 months ago • 3 comments

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 and withStyle stylesheets for easier traceability from HTML to source CSS.
  • Transitioning makeStyles to TSS's modern API, which is similar to makeStyles 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,

garronej avatar Feb 02 '24 02:02 garronej