ref(dep) Upgrade MUI (#12089)

.github/workflows/ci.yml

@@ -21,5 +21,5 @@ jobs:
     - run: npm run lint
     - run: for file in lang/*.json; do npx --yes jsonlint -q $file || exit 1; done
     - env:
-        NODE_OPTIONS: '--max-old-space-size=4096'  
+        NODE_OPTIONS: '--max-old-space-size=8192'
       run: make

package.json

@@ -28,6 +28,8 @@
     "@atlaskit/tabs": "12.1.2",
     "@atlaskit/theme": "11.0.2",
     "@atlaskit/tooltip": "17.1.2",
+    "@emotion/react": "11.10.0",
+    "@emotion/styled": "11.10.0",
     "@giphy/js-fetch-api": "4.1.2",
     "@giphy/react-components": "5.6.0",
     "@giphy/react-native-sdk": "1.7.0",
@@ -36,9 +38,10 @@
     "@jitsi/logger": "2.0.0",
     "@jitsi/rnnoise-wasm": "0.1.0",
     "@jitsi/rtcstats": "9.3.0",
-    "@material-ui/core": "4.11.3",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz",
     "@microsoft/microsoft-graph-client": "3.0.1",
+    "@mui/material": "5.10.2",
+    "@mui/styles": "5.10.2",
     "@react-native-async-storage/async-storage": "1.15.14",
     "@react-native-community/clipboard": "1.5.1",
     "@react-native-community/netinfo": "7.1.7",
@@ -127,6 +130,7 @@
     "resemblejs": "4.0.0",
     "seamless-scroll-polyfill": "2.1.8",
     "styled-components": "3.4.9",
+    "tss-react": "4.0.0",
     "util": "0.12.1",
     "uuid": "8.3.2",
     "wasm-check": "2.0.1",

react/features/app/types.ts

@@ -1,3 +1,5 @@
+import { AnyAction, Dispatch } from 'redux';
+
 import { IAnalyticsState } from '../analytics/reducer';
 import { IAuthenticationState } from '../authentication/reducer';
 import { IAVModerationState } from '../av-moderation/reducer';
@@ -73,7 +75,7 @@ import { IVideoSipGW } from '../videosipgw/reducer';
 import { IVirtualBackground } from '../virtual-background/reducer';
 
 export interface IStore {
-    dispatch: Function;
+    dispatch: Dispatch<AnyAction>;
     getState: () => IState;
 }
 

react/features/base/avatar/components/web/StatelessAvatar.tsx

@@ -1,4 +1,4 @@
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -56,8 +56,8 @@ const styles = () => {
             borderRadius: '50%',
             color: 'rgba(255, 255, 255, 1)',
             fontWeight: '100',
-            objectFit: 'cover',
-            textAlign: 'center',
+            objectFit: 'cover' as const,
+            textAlign: 'center' as const,
 
             '&.avatar-small': {
                 height: '28px !important',
@@ -80,7 +80,7 @@ const styles = () => {
         },
 
         badge: {
-            position: 'relative',
+            position: 'relative' as const,
 
             '&.avatar-badge:after': {
                 borderRadius: '50%',
@@ -262,5 +262,4 @@ class StatelessAvatar extends AbstractStatelessAvatar<Props> {
     }
 }
 
-// @ts-ignore
 export default withStyles(styles)(StatelessAvatar);

react/features/base/buttons/CopyButton.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/jsx-no-bind */
-import { withStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 
 import Icon from '../icons/components/Icon';
 import { IconCheck, IconCopy } from '../icons/svg';
 import { withPixelLineHeight } from '../styles/functions.web';
-import { Theme } from '../ui/types';
 import { copyText } from '../util/helpers';
 
 const styles = (theme: Theme) => {
@@ -41,7 +41,7 @@ const styles = (theme: Theme) => {
         content: {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
+            whiteSpace: 'nowrap' as const,
             maxWidth: 292,
             marginRight: theme.spacing(3),
 
@@ -214,5 +214,4 @@ CopyButton.defaultProps = {
     className: ''
 };
 
-// @ts-ignore
 export default withStyles(styles)(CopyButton);

react/features/base/components/context-menu/ContextMenu.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+
+import { Theme } from '@mui/material';
 import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 // @ts-ignore
 import { getComputedOuterHeight } from '../../../participants-pane/functions';
@@ -10,6 +11,7 @@ import { getComputedOuterHeight } from '../../../participants-pane/functions';
 import { Drawer, JitsiPortal } from '../../../toolbox/components/web';
 // @ts-ignore
 import { showOverflowDrawer } from '../../../toolbox/functions.web';
+import { withPixelLineHeight } from '../../styles/functions.web';
 import participantsPaneTheme from '../themes/participantsPaneTheme.json';
 
 type Props = {
@@ -82,15 +84,14 @@ type Props = {
 
 const MAX_HEIGHT = 400;
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         contextMenu: {
             backgroundColor: theme.palette.ui02,
-            borderRadius: `${theme.shape.borderRadius / 2}px`,
+            borderRadius: `${Number(theme.shape.borderRadius) / 2}px`,
             boxShadow: '0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25)',
             color: theme.palette.text01,
-            ...theme.typography.bodyShortRegular,
-            lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
+            ...withPixelLineHeight(theme.typography.bodyShortRegular),
             marginTop: `${(participantsPaneTheme.panePadding * 2) + theme.typography.bodyShortRegular.fontSize}px`,
             position: 'absolute',
             right: `${participantsPaneTheme.panePadding}px`,
@@ -108,8 +109,7 @@ const useStyles = makeStyles((theme: any) => {
         drawer: {
 
             '& > div': {
-                ...theme.typography.bodyShortRegularLarge,
-                lineHeight: `${theme.typography.bodyShortRegularLarge.lineHeight}px`,
+                ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
 
                 '& svg': {
                     fill: theme.palette.icon01
@@ -140,7 +140,7 @@ const ContextMenu = ({
 }: Props) => {
     const [ isHidden, setIsHidden ] = useState(true);
     const containerRef = useRef<HTMLDivElement | null>(null);
-    const styles = useStyles();
+    const { classes: styles, cx } = useStyles();
     const _overflowDrawer = useSelector(showOverflowDrawer);
 
     useLayoutEffect(() => {
@@ -195,7 +195,7 @@ const ContextMenu = ({
         </JitsiPortal>
         : <div
             aria-label = { accessibilityLabel }
-            className = { clsx(participantsPaneTheme.ignoredChildClassName,
+            className = { cx(participantsPaneTheme.ignoredChildClassName,
                 styles.contextMenu,
                 isHidden && styles.contextMenuHidden,
                 className
@@ -206,8 +206,7 @@ const ContextMenu = ({
             onMouseLeave = { onMouseLeave }
             ref = { containerRef }>
             {children}
-        </div>
-    ;
+        </div>;
 };
 
 export default ContextMenu;

react/features/base/components/context-menu/ContextMenuItem.tsx

@@ -1,7 +1,7 @@
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 // @ts-ignore
 import { showOverflowDrawer } from '../../../toolbox/functions.web';
@@ -71,7 +71,7 @@ export type Props = {
     textClassName?: string;
 };
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         contextMenuItem: {
             alignItems: 'center',
@@ -82,7 +82,7 @@ const useStyles = makeStyles((theme: any) => {
             boxSizing: 'border-box',
 
             '& > *:not(:last-child)': {
-                marginRight: `${theme.spacing(3)}px`
+                marginRight: theme.spacing(3)
             },
 
             '&:hover': {
@@ -119,14 +119,14 @@ const ContextMenuItem = ({
     testId,
     text,
     textClassName }: Props) => {
-    const styles = useStyles();
+    const { classes: styles, cx } = useStyles();
     const _overflowDrawer: boolean = useSelector(showOverflowDrawer);
 
     return (
         <div
             aria-disabled = { disabled }
             aria-label = { accessibilityLabel }
-            className = { clsx(styles.contextMenuItem,
+            className = { cx(styles.contextMenuItem,
                     _overflowDrawer && styles.contextMenuItemDrawer,
                     disabled && styles.contextMenuItemDisabled,
                     className

react/features/base/components/context-menu/ContextMenuItemGroup.tsx

@@ -1,5 +1,6 @@
-import { makeStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import React, { ReactNode } from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import ContextMenuItem, { Props as ItemProps } from './ContextMenuItem';
 
@@ -17,11 +18,11 @@ type Props = {
     children?: ReactNode;
 };
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         contextMenuItemGroup: {
             '&:not(:empty)': {
-                padding: `${theme.spacing(2)}px 0`
+                padding: `${theme.spacing(2)} 0`
             },
 
             '& + &:not(:empty)': {
@@ -35,7 +36,7 @@ const ContextMenuItemGroup = ({
     actions,
     children
 }: Props) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className = { styles.contextMenuItemGroup }>

react/features/base/components/participants-pane-list/ListItem.tsx

@@ -1,9 +1,10 @@
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React, { ReactNode } from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import { ACTION_TRIGGER } from '../../../participants-pane/constants';
 import { isMobileBrowser } from '../../environment/utils';
+import { withPixelLineHeight } from '../../styles/functions.web';
 import participantsPaneTheme from '../themes/participantsPaneTheme.json';
 
 type Props = {
@@ -75,14 +76,13 @@ type Props = {
 
 };
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         container: {
             alignItems: 'center',
             color: theme.palette.text01,
             display: 'flex',
-            ...theme.typography.bodyShortRegular,
-            lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
+            ...withPixelLineHeight(theme.typography.bodyShortRegular),
             margin: `0 -${participantsPaneTheme.panePadding}px`,
             padding: `0 ${participantsPaneTheme.panePadding}px`,
             position: 'relative',
@@ -104,9 +104,8 @@ const useStyles = makeStyles((theme: any) => {
             },
 
             [`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
-                ...theme.typography.bodyShortRegularLarge,
-                lineHeight: `${theme.typography.bodyShortRegularLarge.lineHeight}px`,
-                padding: `${theme.spacing(2)}px ${participantsPaneTheme.panePadding}px`
+                ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
+                padding: `${theme.spacing(2)} ${participantsPaneTheme.panePadding}px`
             }
         },
 
@@ -126,7 +125,7 @@ const useStyles = makeStyles((theme: any) => {
         name: {
             display: 'flex',
             flex: 1,
-            marginRight: `${theme.spacing(2)}px`,
+            marginRight: theme.spacing(2),
             overflow: 'hidden',
             flexDirection: 'column',
             justifyContent: 'flex-start'
@@ -143,7 +142,7 @@ const useStyles = makeStyles((theme: any) => {
             },
 
             '& > *:not(:last-child)': {
-                marginRight: `${theme.spacing(2)}px`
+                marginRight: theme.spacing(2)
             },
 
             '& .jitsi-icon': {
@@ -190,7 +189,7 @@ const ListItem = ({
     textChildren,
     trigger
 }: Props) => {
-    const styles = useStyles();
+    const { classes: styles, cx } = useStyles();
     const _isMobile = isMobileBrowser();
     let timeoutHandler: number;
 
@@ -228,7 +227,7 @@ const ListItem = ({
 
     return (
         <div
-            className = { clsx('list-item-container',
+            className = { cx('list-item-container',
                 styles.container,
                 isHighlighted && styles.highlighted,
                 className
@@ -253,7 +252,7 @@ const ListItem = ({
                 </div>
                 {indicators && (
                     <div
-                        className = { clsx('indicators',
+                        className = { cx('indicators',
                             styles.indicators,
                             (isHighlighted || trigger === ACTION_TRIGGER.PERMANENT) && styles.indicatorsHidden
                         ) }>
@@ -262,7 +261,7 @@ const ListItem = ({
                 )}
                 {!hideActions && (
                     <div
-                        className = { clsx('actions',
+                        className = { cx('actions',
                             styles.actionsContainer,
                             trigger === ACTION_TRIGGER.PERMANENT && styles.actionsPermanent,
                             isHighlighted && styles.actionsVisible

react/features/base/dialog/components/web/ModalHeader.tsx

@@ -9,7 +9,8 @@ import {
     TitleText
     // @ts-ignore
 } from '@atlaskit/modal-dialog/dist/es2019/styled/Content';
-import { withStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 
@@ -52,14 +53,14 @@ interface Props extends WithTranslation {
  *
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         closeButton: {
             borderRadius: theme.shape.borderRadius,
             cursor: 'pointer',
             padding: 13,
 
-            [theme.breakpoints.down('480')]: {
+            [theme.breakpoints.down(480)]: {
                 background: theme.palette.action02
             },
 

react/features/base/dialog/components/web/StatelessDialog.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable lines-around-comment */
 import Modal, { ModalFooter } from '@atlaskit/modal-dialog';
-import { withStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import React, { Component, ReactElement } from 'react';
 import { WithTranslation } from 'react-i18next';
 
@@ -107,7 +108,7 @@ interface Props extends DialogProps, WithTranslation {
  * @param {Object} theme - The theme.
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         footer: {
             boxShadow: 'none'
@@ -117,7 +118,7 @@ const styles = (theme: any) => {
             display: 'flex',
 
             '& > button:first-child': {
-                marginRight: `${theme.spacing(2)}px`
+                marginRight: theme.spacing(2)
             }
         }
     };

react/features/base/label/components/web/Label.tsx

@@ -1,4 +1,5 @@
-import { withStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -51,14 +52,13 @@ type Props = AbstractProps & {
  *
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         label: {
             ...withPixelLineHeight(theme.typography.labelRegular),
-
             alignItems: 'center',
             background: theme.palette.ui04,
-            borderRadius: theme.shape.borderRadius / 2,
+            borderRadius: Number(theme.shape.borderRadius) / 2,
             color: theme.palette.text01,
             display: 'flex',
             height: 28,

react/features/base/premeeting/components/web/ActionButton.tsx

@@ -1,4 +1,5 @@
-import { withStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React, { ReactNode, useCallback } from 'react';
 
@@ -92,7 +93,7 @@ type Props = {
  *
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         actionButton: {
             ...withPixelLineHeight(theme.typography.bodyLongBold),
@@ -103,7 +104,7 @@ const styles = (theme: any) => {
             display: 'inline-block',
             marginBottom: '16px',
             padding: '7px 16px',
-            position: 'relative',
+            position: 'relative' as const,
             textAlign: 'center',
             width: '100%',
             border: 0,
@@ -147,19 +148,19 @@ const styles = (theme: any) => {
             },
 
 
-            [theme.breakpoints.down('400')]: {
+            [theme.breakpoints.down(400)]: {
                 fontSize: 16,
                 marginBottom: 8,
                 padding: '11px 16px'
             }
         },
         options: {
-            borderRadius: theme.shape.borderRadius / 2,
+            borderRadius: Number(theme.shape.borderRadius) / 2,
             alignItems: 'center',
             display: 'flex',
             height: '100%',
             justifyContent: 'center',
-            position: 'absolute',
+            position: 'absolute' as const,
             right: 0,
             top: 0,
             width: 36,
@@ -253,5 +254,4 @@ function ActionButton({
     );
 }
 
-// @ts-ignore
 export default withStyles(styles)(ActionButton);

react/features/base/premeeting/components/web/ConnectionStatus.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React, { useCallback, useState } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../../app/types';
 import { translate } from '../../../i18n/functions';
@@ -26,7 +28,7 @@ interface Props extends WithTranslation {
     connectionType: string;
 }
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         connectionStatus: {
             borderRadius: '6px',
@@ -37,7 +39,7 @@ const useStyles = makeStyles((theme: any) => {
             position: 'absolute',
             width: '100%',
 
-            [theme.breakpoints.down('400')]: {
+            [theme.breakpoints.down(400)]: {
                 margin: 0,
                 width: '100%'
             },
@@ -150,7 +152,7 @@ const CONNECTION_TYPE_MAP: {
  * @returns {ReactElement}
  */
 function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     const [ showDetails, toggleDetails ] = useState(false);
     const arrowClassName = showDetails

react/features/base/premeeting/components/web/PreMeetingScreen.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@mui/styles';
 import React, { PureComponent } from 'react';
 
 import { connect } from '../../../../base/redux';

react/features/base/react/components/web/BaseIndicator.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 import { translate } from '../../../i18n/functions';
 import Icon from '../../../icons/components/Icon';
@@ -61,7 +61,7 @@ interface Props extends WithTranslation {
     tooltipPosition: string;
 }
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles()(() => {
     return {
         indicator: {
             width: '20px',
@@ -90,7 +90,7 @@ const BaseIndicator = ({
     tooltipKey,
     tooltipPosition = 'top'
 }: Props) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const style: any = {};
 
     if (iconSize) {

react/features/base/styles/functions.web.ts

@@ -32,7 +32,7 @@ export function getFixedPlatformStyle(style: StyleType): StyleType {
  * @param {Object} base - The base object containing the `lineHeight` property.
  * @returns {Object}
  */
-export function withPixelLineHeight(base: any): Object {
+export function withPixelLineHeight(base: any) {
     return {
         ...base,
         lineHeight: `${base.lineHeight}px`

react/features/base/ui/components/GlobalStyles.ts

@@ -1,35 +0,0 @@
-import { createStyles, makeStyles } from '@material-ui/core';
-
-import { commonStyles, getGlobalStyles } from '../constants';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
-import { formatCommonClasses } from '../functions';
-
-/**
- * Creates all the global styles.
- *
- * @param {Object} theme - The current UI theme.
- *
- * @returns {Object}
- */
-const useStyles = makeStyles((theme: any) =>
-    createStyles({
-        '@global': {
-            ...formatCommonClasses(commonStyles(theme)),
-            ...getGlobalStyles(theme)
-        }
-    })
-);
-
-/**
- * A component generating all the global styles.
- *
- * @returns {void}
- */
-function GlobalStyles() {
-    useStyles();
-
-    return null;
-}
-
-export default GlobalStyles;

react/features/base/ui/components/GlobalStyles.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { GlobalStyles as MUIGlobalStyles } from 'tss-react';
+import { useStyles } from 'tss-react/mui';
+
+import { commonStyles, getGlobalStyles } from '../constants';
+
+/**
+ * A component generating all the global styles.
+ *
+ * @returns {void}
+ */
+function GlobalStyles() {
+    const { theme } = useStyles();
+
+    return (<MUIGlobalStyles
+        styles = {{
+            ...commonStyles(theme),
+            ...getGlobalStyles(theme)
+        }} />);
+}
+
+export default GlobalStyles;

react/features/base/ui/components/JitsiThemeProvider.web.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import * as React from 'react';
 import { connect } from 'react-redux';
 
@@ -26,7 +26,11 @@ type Props = {
  * @returns {React.ReactNode}
  */
 function JitsiThemeProvider(props: Props) {
-    return <ThemeProvider theme = { props._theme }>{ props.children }</ThemeProvider>;
+    return (
+        <StyledEngineProvider injectFirst = { true }>
+            <ThemeProvider theme = { props._theme }>{ props.children }</ThemeProvider>
+        </StyledEngineProvider>
+    );
 }
 
 /**

react/features/base/ui/components/web/Button.tsx

@@ -1,12 +1,11 @@
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../icons/components/Icon';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 import { BUTTON_TYPES } from '../../constants';
-import { Theme } from '../../types';
 import { ButtonProps } from '../types';
 
 interface IButtonProps extends ButtonProps {
@@ -48,7 +47,7 @@ interface IButtonProps extends ButtonProps {
     testId?: string;
 }
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         button: {
             backgroundColor: theme.palette.action01,
@@ -76,7 +75,7 @@ const useStyles = makeStyles((theme: Theme) => {
                 boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}`
             },
 
-            '& svg': {
+            '& div > svg': {
                 fill: theme.palette.icon01
             }
         },
@@ -95,7 +94,7 @@ const useStyles = makeStyles((theme: Theme) => {
                 backgroundColor: theme.palette.action02Active
             },
 
-            '& svg': {
+            '& div > svg': {
                 fill: theme.palette.icon04
             }
         },
@@ -138,7 +137,7 @@ const useStyles = makeStyles((theme: Theme) => {
                 color: theme.palette.text03
             },
 
-            '& svg': {
+            '& div > svg': {
                 fill: theme.palette.icon03
             }
         },
@@ -148,7 +147,7 @@ const useStyles = makeStyles((theme: Theme) => {
         },
 
         textWithIcon: {
-            marginLeft: `${theme.spacing(2)}px`
+            marginLeft: theme.spacing(2)
         },
 
         small: {
@@ -192,13 +191,13 @@ const Button = React.forwardRef<any, any>(({
     testId,
     type = BUTTON_TYPES.PRIMARY
 }: IButtonProps, ref) => {
-    const styles = useStyles();
+    const { classes: styles, cx } = useStyles();
     const { t } = useTranslation();
 
     return (
         <button
             aria-label = { accessibilityLabel }
-            className = { clsx(styles.button, styles[type],
+            className = { cx(styles.button, styles[type],
                 disabled && styles.disabled,
                 icon && !(labelKey || label) && `${styles.iconButton} iconButton`,
                 styles[size], fullWidth && styles.fullWidth, className) }

react/features/base/ui/components/web/Checkbox.tsx

@@ -1,12 +1,11 @@
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import { isMobileBrowser } from '../../../environment/utils';
 import Icon from '../../../icons/components/Icon';
 import { IconCheckMark } from '../../../icons/svg';
 import { withPixelLineHeight } from '../../../styles/functions.web';
-import BaseTheme from '../BaseTheme.web';
 
 interface CheckboxProps {
 
@@ -41,7 +40,7 @@ interface CheckboxProps {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         formControl: {
             ...withPixelLineHeight(theme.typography.bodyLongRegular),
@@ -151,25 +150,27 @@ const Checkbox = ({
     name,
     onChange
 }: CheckboxProps) => {
-    const styles = useStyles();
+    const { classes: styles, cx, theme } = useStyles();
     const isMobile = isMobileBrowser();
 
-    return (<div className = { clsx(styles.formControl, isMobile && 'is-mobile', className) }>
-        <label className = { clsx(styles.activeArea, isMobile && 'is-mobile') }>
-            <input
-                checked = { checked }
-                disabled = { disabled }
-                name = { name }
-                onChange = { onChange }
-                type = 'checkbox' />
-            <Icon
-                className = 'checkmark'
-                color = { disabled ? BaseTheme.palette.icon03 : BaseTheme.palette.icon01 }
-                size = { 18 }
-                src = { IconCheckMark } />
-        </label>
-        <label>{label}</label>
-    </div>);
+    return (
+        <div className = { cx(styles.formControl, isMobile && 'is-mobile', className) }>
+            <label className = { cx(styles.activeArea, isMobile && 'is-mobile') }>
+                <input
+                    checked = { checked }
+                    disabled = { disabled }
+                    name = { name }
+                    onChange = { onChange }
+                    type = 'checkbox' />
+                <Icon
+                    className = 'checkmark'
+                    color = { disabled ? theme.palette.icon03 : theme.palette.icon01 }
+                    size = { 18 }
+                    src = { IconCheckMark } />
+            </label>
+            <label>{label}</label>
+        </div>
+    );
 };
 
 export default Checkbox;

react/features/base/ui/components/web/ClickableIcon.tsx

@@ -1,10 +1,9 @@
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import { isMobileBrowser } from '../../../environment/utils';
 import Icon from '../../../icons/components/Icon';
-import { Theme } from '../../types';
 
 interface IProps {
     accessibilityLabel: string;
@@ -12,7 +11,7 @@ interface IProps {
     onClick: () => void;
 }
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         button: {
             padding: '2px',
@@ -37,17 +36,19 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 const ClickableIcon = ({ accessibilityLabel, icon, onClick }: IProps) => {
-    const styles = useStyles();
+    const { classes: styles, cx } = useStyles();
     const isMobile = isMobileBrowser();
 
-    return (<button
-        aria-label = { accessibilityLabel }
-        className = { clsx(styles.button, isMobile && 'is-mobile') }
-        onClick = { onClick }>
-        <Icon
-            size = { 24 }
-            src = { icon } />
-    </button>);
+    return (
+        <button
+            aria-label = { accessibilityLabel }
+            className = { cx(styles.button, isMobile && 'is-mobile') }
+            onClick = { onClick }>
+            <Icon
+                size = { 24 }
+                src = { icon } />
+        </button>
+    );
 };
 
 export default ClickableIcon;

react/features/base/ui/components/web/Input.tsx

@@ -1,13 +1,12 @@
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
+import { makeStyles } from 'tss-react/mui';
 
 import { isMobileBrowser } from '../../../environment/utils';
 import Icon from '../../../icons/components/Icon';
 import { IconCloseCircle } from '../../../icons/svg';
 import { withPixelLineHeight } from '../../../styles/functions.web';
-import { Theme } from '../../../ui/types';
 import { InputProps } from '../types';
 
 interface IInputProps extends InputProps {
@@ -26,7 +25,7 @@ interface IInputProps extends InputProps {
     type?: 'text' | 'email' | 'number' | 'password';
 }
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         inputContainer: {
             display: 'flex',
@@ -36,7 +35,7 @@ const useStyles = makeStyles((theme: Theme) => {
         label: {
             color: theme.palette.text01,
             ...withPixelLineHeight(theme.typography.bodyShortRegular),
-            marginBottom: `${theme.spacing(2)}px`,
+            marginBottom: theme.spacing(2),
 
             '&.is-mobile': {
                 ...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
@@ -113,7 +112,7 @@ const useStyles = makeStyles((theme: Theme) => {
         },
 
         bottomLabel: {
-            marginTop: `${theme.spacing(2)}px`,
+            marginTop: theme.spacing(2),
             ...withPixelLineHeight(theme.typography.labelRegular),
             color: theme.palette.text02,
 
@@ -151,7 +150,7 @@ const Input = React.forwardRef<any, IInputProps>(({
     type = 'text',
     value
 }: IInputProps, ref) => {
-    const styles = useStyles();
+    const { classes: styles, cx } = useStyles();
     const isMobile = isMobileBrowser();
 
     const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
@@ -159,61 +158,63 @@ const Input = React.forwardRef<any, IInputProps>(({
 
     const clearInput = useCallback(() => onChange(''), []);
 
-    return (<div className = { clsx(styles.inputContainer, className) }>
-        {label && <span className = { clsx(styles.label, isMobile && 'is-mobile') }>{label}</span>}
-        <div className = { styles.fieldContainer }>
-            {icon && <Icon
-                { ...(iconClick ? { tabIndex: 0 } : {}) }
-                className = { clsx(styles.icon, iconClick && styles.iconClickable) }
-                onClick = { iconClick }
-                size = { 20 }
-                src = { icon } />}
-            {textarea ? (
-                <TextareaAutosize
-                    aria-label = { accessibilityLabel }
-                    autoFocus = { autoFocus }
-                    className = { clsx(styles.input, isMobile && 'is-mobile',
-                        error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
-                    disabled = { disabled }
-                    { ...(id ? { id } : {}) }
-                    maxRows = { maxRows }
-                    minRows = { minRows }
-                    name = { name }
-                    onChange = { handleChange }
-                    onKeyPress = { onKeyPress }
-                    placeholder = { placeholder }
-                    ref = { ref }
-                    value = { value } />
-            ) : (
-                <input
-                    aria-label = { accessibilityLabel }
-                    autoFocus = { autoFocus }
-                    className = { clsx(styles.input, isMobile && 'is-mobile',
-                        error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
-                    disabled = { disabled }
-                    { ...(id ? { id } : {}) }
-                    maxLength = { maxLength }
-                    name = { name }
-                    onChange = { handleChange }
-                    onKeyPress = { onKeyPress }
-                    placeholder = { placeholder }
-                    ref = { ref }
-                    type = { type }
-                    value = { value } />
-            )}
-            {clearable && !disabled && value !== '' && <button className = { styles.clearButton }>
-                <Icon
-                    onClick = { clearInput }
+    return (
+        <div className = { cx(styles.inputContainer, className) }>
+            {label && <span className = { cx(styles.label, isMobile && 'is-mobile') }>{label}</span>}
+            <div className = { styles.fieldContainer }>
+                {icon && <Icon
+                    { ...(iconClick ? { tabIndex: 0 } : {}) }
+                    className = { cx(styles.icon, iconClick && styles.iconClickable) }
+                    onClick = { iconClick }
                     size = { 20 }
-                    src = { IconCloseCircle } />
-            </button>}
+                    src = { icon } />}
+                {textarea ? (
+                    <TextareaAutosize
+                        aria-label = { accessibilityLabel }
+                        autoFocus = { autoFocus }
+                        className = { cx(styles.input, isMobile && 'is-mobile',
+                            error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
+                        disabled = { disabled }
+                        { ...(id ? { id } : {}) }
+                        maxRows = { maxRows }
+                        minRows = { minRows }
+                        name = { name }
+                        onChange = { handleChange }
+                        onKeyPress = { onKeyPress }
+                        placeholder = { placeholder }
+                        ref = { ref }
+                        value = { value } />
+                ) : (
+                    <input
+                        aria-label = { accessibilityLabel }
+                        autoFocus = { autoFocus }
+                        className = { cx(styles.input, isMobile && 'is-mobile',
+                            error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
+                        disabled = { disabled }
+                        { ...(id ? { id } : {}) }
+                        maxLength = { maxLength }
+                        name = { name }
+                        onChange = { handleChange }
+                        onKeyPress = { onKeyPress }
+                        placeholder = { placeholder }
+                        ref = { ref }
+                        type = { type }
+                        value = { value } />
+                )}
+                {clearable && !disabled && value !== '' && <button className = { styles.clearButton }>
+                    <Icon
+                        onClick = { clearInput }
+                        size = { 20 }
+                        src = { IconCloseCircle } />
+                </button>}
+            </div>
+            {bottomLabel && (
+                <span className = { cx(styles.bottomLabel, isMobile && 'is-mobile', error && 'error') }>
+                    {bottomLabel}
+                </span>
+            )}
         </div>
-        {bottomLabel && (
-            <span className = { clsx(styles.bottomLabel, isMobile && 'is-mobile', error && 'error') }>
-                {bottomLabel}
-            </span>
-        )}
-    </div>);
+    );
 });
 
 export default Input;

react/features/base/ui/components/web/Switch.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import { isMobileBrowser } from '../../../environment/utils';
 import { SwitchProps } from '../types';
@@ -13,7 +13,7 @@ interface Props extends SwitchProps {
     id?: string;
 }
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         container: {
             position: 'relative',
@@ -79,25 +79,27 @@ const useStyles = makeStyles((theme: any) => {
 });
 
 const Switch = ({ id, checked, disabled, onChange }: Props) => {
-    const styles = useStyles();
+    const { classes: styles, cx } = useStyles();
     const isMobile = isMobileBrowser();
 
     const change = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
         onChange(e.target.checked);
     }, []);
 
-    return (<label
-        className = { clsx('toggle-container', styles.container, checked && styles.containerOn,
-            isMobile && 'is-mobile', disabled && 'disabled') }>
-        <input
-            type = 'checkbox'
-            { ...(id ? { id } : {}) }
-            checked = { checked }
-            className = { styles.checkbox }
-            disabled = { disabled }
-            onChange = { change } />
-        <div className = { clsx('toggle', styles.toggle, checked && styles.toggleOn, isMobile && 'is-mobile') } />
-    </label>);
+    return (
+        <label
+            className = { cx('toggle-container', styles.container, checked && styles.containerOn,
+                isMobile && 'is-mobile', disabled && 'disabled') }>
+            <input
+                type = 'checkbox'
+                { ...(id ? { id } : {}) }
+                checked = { checked }
+                className = { styles.checkbox }
+                disabled = { disabled }
+                onChange = { change } />
+            <div className = { cx('toggle', styles.toggle, checked && styles.toggleOn, isMobile && 'is-mobile') } />
+        </label>
+    );
 };
 
 export default Switch;

react/features/base/ui/constants.ts

@@ -1,4 +1,4 @@
-import { Theme } from './types';
+import { Theme } from '@mui/material';
 
 /**
  * The types of the buttons.
@@ -19,24 +19,6 @@ export const BUTTON_MODES: {
     CONTAINED: 'contained'
 };
 
-/**
- * An object containing all the class names for common CSS.
- * Add a new name here and the styles to {@code commonStyles} object.
- *
- */
-export const commonClassName = {
-    emptyList: 'empty-list',
-    muteDialog: 'mute-dialog',
-    overflowMenuItem: 'overflow-menu-item',
-    overflowMenuItemIcon: 'overflow-menu-item-icon',
-    participantAvatar: 'participant-avatar',
-    prejoinDialog: 'prejoin-dialog',
-    prejoinDialogButton: 'prejoin-dialog-btn',
-    toolboxIcon: 'toolbox-icon',
-    toolboxButton: 'toolbox-button',
-    toolboxContentItems: 'toolbox-content-items'
-};
-
 /**
  * Returns an object containing the declaration of the common, reusable CSS classes.
  *
@@ -46,15 +28,15 @@ export const commonClassName = {
  */
 export const commonStyles = (theme: Theme) => {
     return {
-        // '.empty-list'
-        [commonClassName.emptyList]: {
+        '.empty-list': {
             listStyleType: 'none',
             margin: 0,
             padding: 0
         },
-        [commonClassName.muteDialog]: {
+
+        '.mute-dialog': {
             '& .separator-line': {
-                margin: `${theme.spacing(4)}px 0 ${theme.spacing(4)}px -20px`,
+                margin: `${theme.spacing(4)} 0 ${theme.spacing(4)} -20px`,
                 padding: '0 20px',
                 width: '100%',
                 height: '1px',
@@ -64,14 +46,15 @@ export const commonStyles = (theme: Theme) => {
             '& .control-row': {
                 display: 'flex',
                 justifyContent: 'space-between',
-                marginTop: `${theme.spacing(3)}px`,
+                marginTop: theme.spacing(3),
 
                 '& label': {
                     fontSize: '14px'
                 }
             }
         },
-        [commonClassName.overflowMenuItem]: {
+
+        '.overflow-menu-item': {
             alignItems: 'center',
             color: theme.palette.text01,
             cursor: 'pointer',
@@ -81,7 +64,7 @@ export const commonStyles = (theme: Theme) => {
             height: 40,
             lineHeight: '24px',
             padding: '8px 16px',
-            boxSizing: 'border-box',
+            boxSizing: 'border-box' as const,
             '& > div': {
                 display: 'flex',
                 alignItems: 'center'
@@ -113,7 +96,8 @@ export const commonStyles = (theme: Theme) => {
                 }
             }
         },
-        [commonClassName.overflowMenuItemIcon]: {
+
+        '.overflow-menu-item-icon': {
             marginRight: '16px',
 
             '& i': {
@@ -138,10 +122,12 @@ export const commonStyles = (theme: Theme) => {
                 width: 20
             }
         },
-        [commonClassName.participantAvatar]: {
-            margin: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(2)}px 0`
+
+        '.participant-avatar': {
+            margin: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(2)} 0`
         },
-        [commonClassName.prejoinDialog]: {
+
+        '.prejoin-dialog': {
             background: '#1C2025',
             boxShadow: '0px 2px 20px rgba(0, 0, 0, 0.5)',
             borderRadius: '5px',
@@ -149,53 +135,53 @@ export const commonStyles = (theme: Theme) => {
             height: '400px',
             width: '375px',
 
-            [`${commonClassName.prejoinDialog}--small`]: {
+            '.prejoin-dialog--small': {
                 height: 300,
                 width: 400
             },
 
-            [`${commonClassName.prejoinDialog}-label`]: {
+            '.prejoin-dialog-label': {
                 fontSize: '15px',
                 lineHeight: '24px'
             },
 
-            [`${commonClassName.prejoinDialog}-label-num`]: {
+            '.prejoin-dialog-label-num': {
                 background: '#2b3b4b',
                 border: '1px solid #A4B8D1',
                 borderRadius: '50%',
                 color: '#fff',
                 display: 'inline-block',
                 height: '24px',
-                marginRight: `${theme.spacing(2)}px`,
+                marginRight: theme.spacing(2),
                 width: '24px'
             },
 
-            [`${commonClassName.prejoinDialog}-container`]: {
+            '.prejoin-dialog-container': {
                 alignItems: 'center',
                 background: 'rgba(0,0,0,0.6)',
                 display: 'flex',
                 height: '100vh',
                 justifyContent: 'center',
                 left: 0,
-                position: 'absolute',
+                position: 'absolute' as const,
                 top: 0,
                 width: '100vw',
                 zIndex: 3
             },
 
-            [`${commonClassName.prejoinDialog}-flag`]: {
+            '.prejoin-dialog-flag': {
                 display: 'inline-block',
-                marginRight: `${theme.spacing(2)}px}`,
+                marginRight: theme.spacing(2),
                 transform: 'scale(1.2)'
             },
 
-            [`${commonClassName.prejoinDialog}-title`]: {
+            '.prejoin-dialog-title': {
                 display: 'inline-block',
                 fontSize: '24px',
                 lineHeight: '32px'
             },
 
-            [`${commonClassName.prejoinDialog}-icon`]: {
+            '.prejoin-dialog-icon': {
                 cursor: 'pointer',
 
                 '& > svg': {
@@ -203,15 +189,15 @@ export const commonStyles = (theme: Theme) => {
                 }
             },
 
-            [commonClassName.prejoinDialogButton]: {
+            '.prejoin-dialog-btn': {
                 width: '309px'
             },
 
-            [`${commonClassName.prejoinDialog}-dialin-container`]: {
-                textAlign: 'center'
+            '.prejoin-dialog-dialin-container': {
+                textAlign: 'center' as const
             },
 
-            [`${commonClassName.prejoinDialog}-delimiter`]: {
+            '.prejoin-dialog-delimiter': {
                 background: '#5f6266',
                 border: '0',
                 height: '1px',
@@ -220,37 +206,37 @@ export const commonStyles = (theme: Theme) => {
                 width: '100%'
             },
 
-            [`${commonClassName.prejoinDialog}-delimiter-container`]: {
-                margin: `${theme.spacing(3)}px 0 ${theme.spacing(4)}px 0`,
-                position: 'relative'
+            '.prejoin-dialog-delimiter-container': {
+                margin: `${theme.spacing(3)} 0 ${theme.spacing(4)} 0`,
+                position: 'relative' as const
             },
 
-            [`${commonClassName.prejoinDialog}-delimiter-txt-container`]: {
-                position: 'absolute',
-                textAlign: 'center',
+            '.prejoin-dialog-delimiter-txt-container': {
+                position: 'absolute' as const,
+                textAlign: 'center' as const,
                 top: '-8px',
                 width: '100%'
             },
 
-            [`${commonClassName.prejoinDialog}-delimiter-txt`]: {
+            '.prejoin-dialog-delimiter-txt': {
                 background: '#1C2025',
                 color: '#5f6266',
                 fontSize: '11px',
-                textTransform: 'uppercase',
-                padding: `0 ${theme.spacing(2)}px`
+                textTransform: 'uppercase' as const,
+                padding: `0 ${theme.spacing(2)}`
             }
         },
 
-        [commonClassName.prejoinDialogButton]: {
-            [`&.primary, &${commonClassName.prejoinDialogButton}.text`]: {
+        '.prejoin-dialog-btn': {
+            '&.primary, &.prejoin-dialog-btn.text': {
                 width: '310px'
             }
         },
 
-        [commonClassName.toolboxIcon]: {
+        '.toolbox-icon': {
             display: 'flex',
             borderRadius: 3,
-            flexDirection: 'column',
+            flexDirection: 'column' as const,
             fontSize: 24,
             height: 48,
             justifyContent: 'center',
@@ -261,7 +247,7 @@ export const commonStyles = (theme: Theme) => {
                     background: theme.palette.ui04
                 }
             },
-            [theme.breakpoints.down('320')]: {
+            [theme.breakpoints.down(320)]: {
                 height: 36,
                 width: 36
             },
@@ -279,20 +265,22 @@ export const commonStyles = (theme: Theme) => {
                 }
             }
         },
-        [commonClassName.toolboxButton]: {
+
+        '.toolbox-button': {
             color: theme.palette.text01,
             cursor: 'pointer',
             display: 'inline-block',
             lineHeight: '48px',
-            textAlign: 'center'
+            textAlign: 'center' as const
         },
-        [commonClassName.toolboxContentItems]: {
+
+        '.toolbox-content-items': {
             background: theme.palette.ui01,
             borderRadius: 6,
             margin: '0 auto',
             padding: 6,
-            textAlign: 'center',
-            pointerEvents: 'all',
+            textAlign: 'center' as const,
+            pointerEvents: 'all' as const,
             boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)',
 
             '& > div': {

react/features/base/ui/functions.web.ts

@@ -1,8 +1,17 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme, adaptV4Theme } from '@mui/material/styles';
+
+import { Palette as Palette1, Typography } from '../ui/types';
 
-import { Theme } from './types';
 import { createColorTokens } from './utils';
 
+declare module '@mui/material/styles' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface Palette extends Palette1 {}
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface TypographyVariants extends Typography {}
+}
+
 interface ThemeProps {
     breakpoints: Object;
     colorMap: Object;
@@ -19,41 +28,19 @@ interface ThemeProps {
  * @param {Object} arg - The ui tokens.
  * @returns {Object}
  */
-export function createWebTheme({ font, colors, colorMap, shape, spacing, typography, breakpoints }: ThemeProps): Theme {
-    return createMuiTheme({
-        props: {
-            // disable ripple effect on buttons globally
-            MuiButtonBase: {
-                disableRipple: true
-            }
-        },
-
-        // use token spacing array
-        spacing
-    }, {
+export function createWebTheme({ font, colors, colorMap, shape, spacing, typography, breakpoints }: ThemeProps) {
+    return createTheme(adaptV4Theme({
+        spacing,
         palette: createColorTokens(colorMap, colors),
         shape,
+
+        // @ts-ignore
         typography: {
+            // @ts-ignore
             font,
             ...typography
         },
         breakpoints
-    }) as unknown as Theme;
-}
-
-/**
- * Formats the common styles object to be interpreted as proper CSS.
- *
- * @param {Object} stylesObj - The styles object.
- * @returns {Object}
- */
-export function formatCommonClasses(stylesObj: Object) {
-    const formatted: any = {};
-
-    for (const [ key, value ] of Object.entries(stylesObj)) {
-        formatted[`.${key}`] = value;
-    }
-
-    return formatted;
+    }));
 }
 

react/features/base/ui/types.ts

@@ -5,85 +5,76 @@ interface TypographyType {
     lineHeight: number;
 }
 
-export interface Theme {
-    breakpoints: {
-        down: (value: number | string) => string;
-        up: (value: number | string) => string;
-    };
-    palette: {
-        action01: string;
-        action01Active: string;
-        action01Hover: string;
-        action02: string;
-        action02Active: string;
-        action02Hover: string;
-        action03: string;
-        action03Active: string;
-        action03Hover: string;
-        actionDanger: string;
-        actionDangerActive: string;
-        actionDangerHover: string;
-        disabled01: string;
-        field01: string;
-        focus01: string;
-        icon01: string;
-        icon02: string;
-        icon03: string;
-        icon04: string;
-        iconError: string;
-        link01: string;
-        link01Active: string;
-        link01Hover: string;
-        success01: string;
-        success02: string;
-        support01: string;
-        support02: string;
-        support03: string;
-        support04: string;
-        support05: string;
-        support06: string;
-        support07: string;
-        support08: string;
-        support09: string;
-        text01: string;
-        text02: string;
-        text03: string;
-        text04: string;
-        textError: string;
-        ui01: string;
-        ui02: string;
-        ui03: string;
-        ui04: string;
-        ui05: string;
-        ui06: string;
-        ui07: string;
-        ui08: string;
-        ui09: string;
-        ui10: string;
-        uiBackground: string;
-        warning01: string;
-        warning02: string;
-    };
-    shape: {
-        borderRadius: number;
-    };
-    spacing: (index: number) => number;
-    typography: {
-        bodyLongBold: TypographyType;
-        bodyLongBoldLarge: TypographyType;
-        bodyLongRegular: TypographyType;
-        bodyLongRegularLarge: TypographyType;
-        bodyShortBold: TypographyType;
-        bodyShortBoldLarge: TypographyType;
-        bodyShortRegular: TypographyType;
-        bodyShortRegularLarge: TypographyType;
-        heading1: TypographyType;
-        heading2: TypographyType;
-        heading3: TypographyType;
-        heading4: TypographyType;
-        heading5: TypographyType;
-        heading6: TypographyType;
-        labelBold: TypographyType;
-        labelRegular: TypographyType;
-    };
+export interface Palette {
+    action01: string;
+    action01Active: string;
+    action01Hover: string;
+    action02: string;
+    action02Active: string;
+    action02Hover: string;
+    action03: string;
+    action03Active: string;
+    action03Hover: string;
+    actionDanger: string;
+    actionDangerActive: string;
+    actionDangerHover: string;
+    disabled01: string;
+    field01: string;
+    focus01: string;
+    icon01: string;
+    icon02: string;
+    icon03: string;
+    icon04: string;
+    iconError: string;
+    link01: string;
+    link01Active: string;
+    link01Hover: string;
+    success01: string;
+    success02: string;
+    support01: string;
+    support02: string;
+    support03: string;
+    support04: string;
+    support05: string;
+    support06: string;
+    support07: string;
+    support08: string;
+    support09: string;
+    text01: string;
+    text02: string;
+    text03: string;
+    text04: string;
+    textError: string;
+    ui01: string;
+    ui02: string;
+    ui03: string;
+    ui04: string;
+    ui05: string;
+    ui06: string;
+    ui07: string;
+    ui08: string;
+    ui09: string;
+    ui10: string;
+    uiBackground: string;
+    warning01: string;
+    warning02: string;
+}
+
+export interface Typography {
+    bodyLongBold: TypographyType;
+    bodyLongBoldLarge: TypographyType;
+    bodyLongRegular: TypographyType;
+    bodyLongRegularLarge: TypographyType;
+    bodyShortBold: TypographyType;
+    bodyShortBoldLarge: TypographyType;
+    bodyShortRegular: TypographyType;
+    bodyShortRegularLarge: TypographyType;
+    heading1: TypographyType;
+    heading2: TypographyType;
+    heading3: TypographyType;
+    heading4: TypographyType;
+    heading5: TypographyType;
+    heading6: TypographyType;
+    labelBold: TypographyType;
+    labelRegular: TypographyType;
 }

react/features/chat/components/web/GifMessage.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 type Props = {
 
@@ -9,7 +9,7 @@ type Props = {
     url: string;
 };
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles()(() => {
     return {
         container: {
             display: 'flex',
@@ -21,14 +21,14 @@ const useStyles = makeStyles(() => {
                 maxWidth: '100%',
                 maxHeight: '100%',
                 objectFit: 'contain',
-                flexGrow: '1'
+                flexGrow: 1
             }
         }
     };
 });
 
 const GifMessage = ({ url }: Props) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (<div className = { styles.container }>
         <img

react/features/chat/components/web/NewMessagesButton.tsx

@@ -1,6 +1,7 @@
-import { makeStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
@@ -15,7 +16,7 @@ export interface INewMessagesButtonProps extends WithTranslation {
     onGoToFirstUnreadMessage: () => void;
 }
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         container: {
             position: 'absolute',
@@ -70,7 +71,7 @@ const useStyles = makeStyles((theme: any) => {
  * @returns {JSX.Element}
  */
 function NewMessagesButton({ onGoToFirstUnreadMessage, t }: INewMessagesButtonProps): JSX.Element {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div

react/features/chat/components/web/TouchmoveHack.tsx

@@ -1,6 +1,5 @@
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
 import React, { ReactElement, useEffect, useRef } from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import { isMobileBrowser } from '../../../base/environment/utils';
 
@@ -23,7 +22,7 @@ type Props = {
 
 };
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles()(() => {
     return {
         flex: {
             display: 'flex',
@@ -72,11 +71,11 @@ function TouchmoveHack({ children, isModal, flex }: Props) {
             }
         };
     }, []);
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
 
     return (
         <div
-            className = { clsx(classes.base, flex && classes.flex) }
+            className = { cx(classes.base, flex && classes.flex) }
             ref = { touchMoveElementRef }>
             {children}
         </div>

react/features/conference/components/web/RaisedHandsCountLabel.tsx

@@ -1,19 +1,20 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../app/types';
 import { IconRaisedHand } from '../../../base/icons/svg';
 import Label from '../../../base/label/components/web/Label';
 // @ts-ignore
 import { Tooltip } from '../../../base/tooltip';
-import BaseTheme from '../../../base/ui/components/BaseTheme.web';
 // @ts-ignore
 import { open as openParticipantsPane } from '../../../participants-pane/actions';
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         label: {
             backgroundColor: theme.palette.warning02,
@@ -24,7 +25,7 @@ const useStyles = makeStyles((theme: any) => {
 });
 
 const RaisedHandsCountLabel = () => {
-    const styles = useStyles();
+    const { classes: styles, theme } = useStyles();
     const dispatch = useDispatch();
     const raisedHandsCount = useSelector((state: IState) =>
         (state['features/base/participants'].raisedHandsQueue || []).length);
@@ -39,7 +40,7 @@ const RaisedHandsCountLabel = () => {
         <Label
             className = { styles.label }
             icon = { IconRaisedHand }
-            iconColor = { BaseTheme.palette.uiBackground }
+            iconColor = { theme.palette.uiBackground }
             id = 'raisedHandsCountLabel'
             onClick = { onClick }
             text = { `${raisedHandsCount}` } />

react/features/connection-indicator/components/web/ConnectionIndicator.tsx

@@ -1,5 +1,7 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
@@ -116,11 +118,10 @@ type Props = AbstractProps & WithTranslation & {
      */
     audioSsrc: number;
 
-
     /**
      * An object containing the CSS classes.
      */
-    classes: Object;
+    classes: any;
 
     /**
      * The Redux dispatch function.
@@ -153,7 +154,7 @@ type State = AbstractState & {
     popoverVisible: boolean;
 };
 
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         container: {
             display: 'inline-block'

react/features/connection-stats/components/ConnectionStatsTable.tsx

@@ -1,4 +1,5 @@
-import { withStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
@@ -193,11 +194,11 @@ function onClick(event: React.MouseEvent) {
     event.stopPropagation();
 }
 
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         actions: {
             margin: '10px auto',
-            textAlign: 'center'
+            textAlign: 'center' as const
         },
         connectionStatsTable: {
             '&, & > table': {
@@ -221,17 +222,17 @@ const styles = (theme: any) => {
             }
         },
         contextMenu: {
-            position: 'relative',
+            position: 'relative' as const,
             marginTop: 0,
             right: 'auto',
-            padding: `${theme.spacing(2)}px ${theme.spacing(1)}px`,
-            marginLeft: `${theme.spacing(1)}px`,
-            marginRight: `${theme.spacing(1)}px`,
-            marginBottom: `${theme.spacing(1)}px`
+            padding: `${theme.spacing(2)} ${theme.spacing(1)}`,
+            marginLeft: theme.spacing(1),
+            marginRight: theme.spacing(1),
+            marginBottom: theme.spacing(1)
         },
         download: {},
         mobile: {
-            margin: `${theme.spacing(3)}px`
+            margin: theme.spacing(3)
         },
         status: {
             fontWeight: 'bold'
@@ -961,5 +962,4 @@ function getStringFromArray(array: string[]) {
     return res;
 }
 
-// @ts-ignore
 export default translate(withStyles(styles)(ConnectionStatsTable));

react/features/display-name/components/web/DisplayName.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
@@ -13,6 +14,7 @@ import {
 } from '../../../base/participants/functions';
 // @ts-ignore
 import { updateSettings } from '../../../base/settings';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 // @ts-ignore
 import { Tooltip } from '../../../base/tooltip';
 // @ts-ignore
@@ -88,11 +90,10 @@ type State = {
     isEditing: boolean;
 };
 
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         displayName: {
-            ...theme.typography.labelBold,
-            lineHeight: `${theme.typography.labelBold.lineHeight}px`,
+            ...withPixelLineHeight(theme.typography.labelBold),
             color: theme.palette.text01,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
@@ -105,8 +106,7 @@ const styles = (theme: any) => {
             background: 'none',
             boxShadow: 'none',
             padding: 0,
-            ...theme.typography.labelBold,
-            lineHeight: `${theme.typography.labelBold.lineHeight}px`,
+            ...withPixelLineHeight(theme.typography.labelBold),
             color: theme.palette.text01
         }
     };

react/features/display-name/components/web/DisplayNameBadge.tsx

@@ -1,9 +1,8 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
-import { Theme } from '../../../base/ui/types';
-
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     const { text01 } = theme.palette;
 
     return {
@@ -27,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) => {
  * @returns {ReactElement}
  */
 const DisplayNameBadge: React.FC<{ name: string; }> = ({ name }) => {
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     return (
         <div className = { classes.badge }>

react/features/display-name/components/web/StageParticipantNameLabel.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
+
+import { Theme } from '@mui/material';
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../app/types';
 // @ts-ignore
@@ -19,7 +20,7 @@ import { isLayoutTileView } from '../../../video-layout';
 
 import DisplayNameBadge from './DisplayNameBadge';
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         badgeContainer: {
             ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
@@ -47,7 +48,7 @@ const useStyles = makeStyles((theme: any) => {
  * @returns {ReactElement|null}
  */
 const StageParticipantNameLabel = () => {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const largeVideoParticipant: Participant = useSelector(getLargeVideoParticipant);
     const selectedId = largeVideoParticipant?.id;
     const nameToDisplay = useSelector((state: IState) => getParticipantDisplayName(state, selectedId));
@@ -62,7 +63,7 @@ const StageParticipantNameLabel = () => {
     if (showDisplayName && nameToDisplay && selectedId !== localId && !isTileView) {
         return (
             <div
-                className = { clsx(
+                className = { cx(
                     'stage-participant-label',
                     classes.badgeContainer,
                     toolboxVisible && classes.containerElevated

react/features/dynamic-branding/functions.web.ts

@@ -1,4 +1,5 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
+import { createTheme, adaptV4Theme } from '@mui/material/styles';
 
 import { font, colors, colorMap, spacing, shape, typography, breakpoints } from '../base/ui/Tokens';
 import { createColorTokens } from '../base/ui/utils';
@@ -9,7 +10,7 @@ import { createColorTokens } from '../base/ui/utils';
  * @param {Object} customTheme - The branded custom theme.
  * @returns {Object} - The MUI theme.
  */
-export function createMuiBrandingTheme(customTheme: any) {
+export function createMuiBrandingTheme(customTheme: Theme) {
     const {
         palette: customPalette,
         shape: customShape,
@@ -45,28 +46,23 @@ export function createMuiBrandingTheme(customTheme: any) {
         overwriteRecurrsive(newBreakpoints, customBreakpoints);
     }
 
-    let newSpacing = [ ...spacing ];
+    let newSpacing: any = [ ...spacing ];
 
     if (customSpacing?.length) {
         newSpacing = customSpacing;
     }
 
-    return createMuiTheme({
-        props: {
-            // disable ripple effect on buttons globally
-            MuiButtonBase: {
-                disableRipple: true
-            }
-        },
-
-        // use token spacing array
-        spacing: newSpacing
-    }, {
+    return createTheme(adaptV4Theme({
+        spacing: newSpacing,
         palette: newPalette,
         shape: newShape,
+
+        // @ts-ignore
         typography: newTypography,
+
+        // @ts-ignore
         breakpoints: newBreakpoints
-    });
+    }));
 }
 
 /**

react/features/filmstrip/components/web/Filmstrip.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import _ from 'lodash';
 import React, { PureComponent } from 'react';

react/features/filmstrip/components/web/PinnedIndicator.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../app/types';
 import { IconPinParticipant } from '../../../base/icons/svg';
@@ -32,7 +32,7 @@ type Props = {
     tooltipPosition: string;
 };
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles()(() => {
     return {
         pinnedIndicator: {
             backgroundColor: 'rgba(0, 0, 0, .7)',
@@ -60,7 +60,7 @@ const PinnedIndicator = ({
     const activePinnedParticipants: Array<{ participantId: string; pinned: boolean; }>
         = useSelector(getPinnedActiveParticipants);
     const isPinned = activePinnedParticipants.find(p => p.participantId === participantId);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     if ((stageFilmstrip && !isPinned) || (!stageFilmstrip && !pinned)) {
         return null;

react/features/filmstrip/components/web/RaisedHandIndicator.tsx

@@ -1,13 +1,13 @@
-import { makeStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../app/types';
 import { IconRaisedHand } from '../../../base/icons/svg';
 import { getParticipantById, hasRaisedHand } from '../../../base/participants/functions';
 import { Participant } from '../../../base/participants/types';
 import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
-import BaseTheme from '../../../base/ui/components/BaseTheme.web';
 
 /**
  * The type of the React {@code Component} props of {@link RaisedHandIndicator}.
@@ -31,7 +31,7 @@ type Props = {
     tooltipPosition: string;
 };
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         raisedHandIndicator: {
             backgroundColor: theme.palette.warning02,
@@ -57,7 +57,7 @@ const RaisedHandIndicator = ({
     const participant: Participant | undefined = useSelector((state: IState) =>
         getParticipantById(state, participantId));
     const _raisedHand = hasRaisedHand(participant);
-    const styles = useStyles();
+    const { classes: styles, theme } = useStyles();
 
     if (!_raisedHand) {
         return null;
@@ -67,7 +67,7 @@ const RaisedHandIndicator = ({
         <div className = { styles.raisedHandIndicator }>
             <BaseIndicator
                 icon = { IconRaisedHand }
-                iconColor = { BaseTheme.palette.uiBackground }
+                iconColor = { theme.palette.uiBackground }
                 iconSize = { `${iconSize}px` }
                 tooltipKey = 'raisedHand'
                 tooltipPosition = { tooltipPosition } />

react/features/filmstrip/components/web/Thumbnail.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { createScreenSharingIssueEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
@@ -23,7 +25,6 @@ import {
     hasRaisedHand
 } from '../../../base/participants/functions';
 import { Participant } from '../../../base/participants/types';
-import { connect } from '../../../base/redux/functions';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
 // @ts-ignore
 import { isTestModeEnabled } from '../../../base/testing';
@@ -279,19 +280,19 @@ export type Props = {
     width?: number;
 };
 
-const defaultStyles = (theme: any) => {
+const defaultStyles = (theme: Theme) => {
     return {
         indicatorsContainer: {
-            position: 'absolute',
-            padding: `${theme.spacing(1)}px`,
+            position: 'absolute' as const,
+            padding: theme.spacing(1),
             zIndex: 10,
             width: '100%',
-            boxSizing: 'border-box',
+            boxSizing: 'border-box' as const,
             display: 'flex',
             left: 0,
 
             '&.tile-view-mode': {
-                padding: `${theme.spacing(2)}px`
+                padding: theme.spacing(2)
             }
         },
 
@@ -326,7 +327,7 @@ const defaultStyles = (theme: any) => {
         },
 
         containerBackground: {
-            position: 'absolute',
+            position: 'absolute' as const,
             top: 0,
             left: 0,
             height: '100%',
@@ -336,7 +337,7 @@ const defaultStyles = (theme: any) => {
         },
 
         borderIndicator: {
-            position: 'absolute',
+            position: 'absolute' as const,
             width: '100%',
             height: '100%',
             zIndex: 9,
@@ -360,7 +361,7 @@ const defaultStyles = (theme: any) => {
         },
 
         gif: {
-            position: 'absolute',
+            position: 'absolute' as const,
             width: '100%',
             height: '100%',
             zIndex: 11,
@@ -1309,5 +1310,4 @@ function _mapStateToProps(state: IState, ownProps: any): Object {
     };
 }
 
-// @ts-ignore
 export default connect(_mapStateToProps)(withStyles(defaultStyles)(Thumbnail));

react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import {
     getMultipleVideoSupportFeatureFlag,
@@ -51,7 +52,7 @@ type Props = {
     thumbnailType: string;
 };
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles()(() => {
     return {
         nameContainer: {
             display: 'flex',
@@ -78,7 +79,7 @@ const ThumbnailBottomIndicators = ({
     showStatusIndicators = true,
     thumbnailType
 }: Props) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const _allowEditing = !useSelector(isNameReadOnly);
     const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
     const _isMultiStreamEnabled = useSelector(getMultipleVideoSupportFeatureFlag);

react/features/filmstrip/components/web/ThumbnailTopIndicators.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../app/types';
 // @ts-ignore
@@ -72,7 +72,7 @@ type Props = {
     thumbnailType: string;
 };
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles()(() => {
     return {
         container: {
             display: 'flex',
@@ -95,7 +95,7 @@ const ThumbnailTopIndicators = ({
     showPopover,
     thumbnailType
 }: Props) => {
-    const styles = useStyles();
+    const { classes: styles, cx } = useStyles();
 
     const _isMobile = isMobileBrowser();
     const { NORMAL = 16 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
@@ -124,44 +124,43 @@ const ThumbnailTopIndicators = ({
 
     const tooltipPosition = getIndicatorsTooltipPosition(thumbnailType);
 
-    return (
-        <>
-            <div className = { styles.container }>
-                <PinnedIndicator
+    return (<>
+        <div className = { styles.container }>
+            <PinnedIndicator
+                iconSize = { _indicatorIconSize }
+                participantId = { participantId }
+                tooltipPosition = { tooltipPosition } />
+            {!_connectionIndicatorDisabled
+                && <ConnectionIndicator
+                    alwaysVisible = { showConnectionIndicator }
+                    enableStatsDisplay = { true }
                     iconSize = { _indicatorIconSize }
                     participantId = { participantId }
-                    tooltipPosition = { tooltipPosition } />
-                {!_connectionIndicatorDisabled
-                    && <ConnectionIndicator
-                        alwaysVisible = { showConnectionIndicator }
-                        enableStatsDisplay = { true }
-                        iconSize = { _indicatorIconSize }
-                        participantId = { participantId }
-                        statsPopoverPosition = { STATS_POPOVER_POSITION[thumbnailType] } />
-                }
-                <RaisedHandIndicator
-                    iconSize = { _indicatorIconSize }
-                    participantId = { participantId }
-                    tooltipPosition = { tooltipPosition } />
-                {thumbnailType !== THUMBNAIL_TYPE.TILE && (
-                    <div className = { clsx(indicatorsClassName, 'top-indicators') }>
-                        <StatusIndicators
-                            participantID = { participantId }
-                            screenshare = { !_isMultiStreamEnabled } />
-                    </div>
-                )}
-            </div>
-            <div className = { styles.container }>
-                <VideoMenuTriggerButton
-                    hidePopover = { hidePopover }
-                    local = { local }
-                    participantId = { participantId }
-                    popoverVisible = { popoverVisible }
-                    showPopover = { showPopover }
-                    thumbnailType = { thumbnailType }
-                    visible = { isHovered } />
-            </div>
-        </>);
+                    statsPopoverPosition = { STATS_POPOVER_POSITION[thumbnailType] } />
+            }
+            <RaisedHandIndicator
+                iconSize = { _indicatorIconSize }
+                participantId = { participantId }
+                tooltipPosition = { tooltipPosition } />
+            {thumbnailType !== THUMBNAIL_TYPE.TILE && (
+                <div className = { cx(indicatorsClassName, 'top-indicators') }>
+                    <StatusIndicators
+                        participantID = { participantId }
+                        screenshare = { !_isMultiStreamEnabled } />
+                </div>
+            )}
+        </div>
+        <div className = { styles.container }>
+            <VideoMenuTriggerButton
+                hidePopover = { hidePopover }
+                local = { local }
+                participantId = { participantId }
+                popoverVisible = { popoverVisible }
+                showPopover = { showPopover }
+                thumbnailType = { thumbnailType }
+                visible = { isHovered } />
+        </div>
+    </>);
 };
 
 export default ThumbnailTopIndicators;

react/features/gifs/components/web/GifsMenu.tsx

@@ -1,18 +1,18 @@
 /* eslint-disable lines-around-comment */
 import { GiphyFetch, TrendingOptions } from '@giphy/js-fetch-api';
 import { Grid } from '@giphy/react-components';
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { batch, useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { createGifSentEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
 import { IState } from '../../../app/types';
 // @ts-ignore
 import InputField from '../../../base/premeeting/components/web/InputField';
-import BaseTheme from '../../../base/ui/components/BaseTheme.web';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 // @ts-ignore
 import { sendMessage } from '../../../chat/actions.any';
 import { SCROLL_SIZE } from '../../../filmstrip/constants';
@@ -28,13 +28,13 @@ import { setGifDrawerVisibility } from '../../actions';
 // @ts-ignore
 import { formatGifUrlMessage, getGifAPIKey, getGifUrl } from '../../functions';
 
-const OVERFLOW_DRAWER_PADDING = BaseTheme.spacing(3);
+const OVERFLOW_DRAWER_PADDING = 16;
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         gifsMenu: {
             width: '100%',
-            marginBottom: `${theme.spacing(2)}px`,
+            marginBottom: theme.spacing(2),
             display: 'flex',
             flexDirection: 'column',
 
@@ -49,12 +49,11 @@ const useStyles = makeStyles((theme: any) => {
             borderRadius: `${theme.shape.borderRadius}px`,
             border: 'none',
             outline: 0,
-            ...theme.typography.bodyShortRegular,
-            lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
+            ...withPixelLineHeight(theme.typography.bodyShortRegular),
             color: theme.palette.text01,
-            padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`,
+            padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
             width: '100%',
-            marginBottom: `${theme.spacing(3)}px`
+            marginBottom: theme.spacing(3)
         },
 
         gifContainer: {
@@ -69,11 +68,11 @@ const useStyles = makeStyles((theme: any) => {
             alignItems: 'center',
             justifyContent: 'center',
             color: '#fff',
-            marginTop: `${theme.spacing(1)}px`
+            marginTop: theme.spacing(1)
         },
 
         overflowMenu: {
-            padding: `${theme.spacing(3)}px`,
+            padding: theme.spacing(3),
             width: '100%',
             boxSizing: 'border-box'
         },
@@ -98,7 +97,7 @@ function GifsMenu() {
     const API_KEY: string = useSelector(getGifAPIKey);
     const giphyFetch = new GiphyFetch(API_KEY);
     const [ searchKey, setSearchKey ] = useState<string>();
-    const styles = useStyles();
+    const { classes: styles, cx } = useStyles();
     const dispatch = useDispatch();
     const { t } = useTranslation();
     const overflowDrawer: boolean = useSelector(showOverflowDrawer);
@@ -190,18 +189,18 @@ function GifsMenu() {
 
     const gifMenu = (
         <div
-            className = { clsx(styles.gifsMenu,
+            className = { cx(styles.gifsMenu,
                 overflowDrawer && styles.overflowMenu
             ) }>
             <InputField
                 autoFocus = { true }
-                className = { clsx(styles.searchField, 'gif-input') }
+                className = { cx(styles.searchField, 'gif-input') }
                 onChange = { handleSearchKeyChange }
                 placeHolder = { t('giphy.search') }
                 testId = 'gifSearch.key'
                 type = 'text' />
             <div
-                className = { clsx(styles.gifContainer,
+                className = { cx(styles.gifContainer,
                 overflowDrawer && styles.gifContainerOverflow) }>
                 <Grid
                     columns = { 2 }

react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx

@@ -1,4 +1,5 @@
-import { withStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
@@ -31,7 +32,7 @@ interface Props extends WithTranslation {
  *
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         list: {
             listStyleType: 'none',

react/features/large-video/components/ScreenSharePlaceholder.web.tsx

@@ -1,70 +1,72 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles, createStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { useStore } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { translate } from '../../base/i18n/functions';
-import { Theme } from '../../base/ui/types';
 // @ts-ignore
 import { setSeeWhatIsBeingShared } from '../actions.web';
 
-const useStyles = makeStyles((theme: Theme) => createStyles({
-    overlayContainer: {
-        width: '100%',
-        height: '100%',
-        backgroundColor: theme.palette.ui02,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        position: 'absolute'
-    },
-    content: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    laptop: {
-        width: '88px',
-        height: '56px',
-        boxSizing: 'border-box',
-        border: '3px solid',
-        borderColor: theme.palette.text01,
-        borderRadius: '6px'
-    },
-    laptopStand: {
-        width: '40px',
-        height: '4px',
-        backgroundColor: theme.palette.text01,
-        boxSizing: 'border-box',
-        borderRadius: '6px',
-        marginTop: '4px'
-    },
-    sharingMessage: {
-        fontStyle: 'normal',
-        fontWeight: 600,
-        fontSize: '20px',
-        lineHeight: '28px',
-        marginTop: '24px',
-        letterSpacing: '-0.012em',
-        color: theme.palette.text01
-    },
-    showSharing: {
-        fontStyle: 'normal',
-        fontWeight: 600,
-        fontSize: '14px',
-        lineHeight: '20px',
-        height: '20px',
-        marginTop: '16px',
-        color: theme.palette.link01,
-        cursor: 'pointer',
+const useStyles = makeStyles()((theme: Theme) => {
+    return {
+        overlayContainer: {
+            width: '100%',
+            height: '100%',
+            backgroundColor: theme.palette.ui02,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute'
+        },
+        content: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        laptop: {
+            width: '88px',
+            height: '56px',
+            boxSizing: 'border-box',
+            border: '3px solid',
+            borderColor: theme.palette.text01,
+            borderRadius: '6px'
+        },
+        laptopStand: {
+            width: '40px',
+            height: '4px',
+            backgroundColor: theme.palette.text01,
+            boxSizing: 'border-box',
+            borderRadius: '6px',
+            marginTop: '4px'
+        },
+        sharingMessage: {
+            fontStyle: 'normal',
+            fontWeight: 600,
+            fontSize: '20px',
+            lineHeight: '28px',
+            marginTop: '24px',
+            letterSpacing: '-0.012em',
+            color: theme.palette.text01
+        },
+        showSharing: {
+            fontStyle: 'normal',
+            fontWeight: 600,
+            fontSize: '14px',
+            lineHeight: '20px',
+            height: '20px',
+            marginTop: '16px',
+            color: theme.palette.link01,
+            cursor: 'pointer',
 
-        '&:hover': {
-            color: theme.palette.link01Hover
+            '&:hover': {
+                color: theme.palette.link01Hover
+            }
         }
-    }
-}));
+    };
+});
 
 /**
  * Component that displays a placeholder for when the screen is shared.
@@ -73,10 +75,9 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
  * @returns {ReactElement}
  */
 const ScreenSharePlaceholder: React.FC<WithTranslation> = ({ t }) => {
-    const classes = useStyles();
+    const { classes } = useStyles();
     const store = useStore();
 
-
     const updateShowMeWhatImSharing = useCallback(() => {
         store.dispatch(setSeeWhatIsBeingShared(true));
     }, []);

react/features/notifications/components/web/NotificationsContainer.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable lines-around-comment */
 import { FlagGroupContext } from '@atlaskit/flag/flag-group';
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
-import { withStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
@@ -55,10 +56,10 @@ interface Props extends WithTranslation {
     portal?: boolean;
 }
 
-const useStyles = (theme: any) => {
+const useStyles = (theme: Theme) => {
     return {
         container: {
-            position: 'absolute',
+            position: 'absolute' as const,
             left: '16px',
             bottom: '90px',
             width: '400px',
@@ -252,5 +253,4 @@ function _mapStateToProps(state: IState) {
     };
 }
 
-// @ts-ignore
 export default translate(connect(_mapStateToProps)(withStyles(useStyles)(NotificationsContainer)));

react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx

@@ -1,15 +1,17 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+
+import { Theme } from '@mui/material';
 import React, { ReactElement, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../../../app/types';
 import ListItem from '../../../../../base/components/participants-pane-list/ListItem';
 import Icon from '../../../../../base/icons/components/Icon';
 import { IconArrowDown, IconArrowUp } from '../../../../../base/icons/svg';
 import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
+import { withPixelLineHeight } from '../../../../../base/styles/functions.web';
 // @ts-ignore
 import { showOverflowDrawer } from '../../../../../toolbox/functions.web';
 import { ACTION_TRIGGER } from '../../../../constants';
@@ -82,7 +84,7 @@ type Props = {
     toggleParticipantMenu: Function;
 };
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         container: {
             boxShadow: 'none'
@@ -91,9 +93,8 @@ const useStyles = makeStyles((theme: any) => {
         roomName: {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            ...theme.typography.labelButton,
-            lineHeight: `${theme.typography.labelButton.lineHeight}px`,
+            whiteSpace: 'nowrap', // @ts-ignore
+            ...withPixelLineHeight(theme.typography.labelButton),
             padding: '12px 0'
         },
 
@@ -123,7 +124,7 @@ export const CollapsibleRoom = ({
     toggleParticipantMenu
 }: Props) => {
     const { t } = useTranslation();
-    const styles = useStyles();
+    const { classes: styles, cx } = useStyles();
     const [ collapsed, setCollapsed ] = useState(false);
     const toggleCollapsed = useCallback(() => {
         setCollapsed(!collapsed);
@@ -153,41 +154,39 @@ export const CollapsibleRoom = ({
         participantName: displayName
     }), [ room, moderator ]);
 
-    return (
-        <>
-            <ListItem
-                actions = { children }
-                className = { clsx(styles.container, 'breakout-room-container') }
-                icon = { arrow }
-                isHighlighted = { isHighlighted }
-                onClick = { toggleCollapsed }
-                onLongPress = { raiseMenu }
-                onMouseLeave = { onLeave }
-                testId = { room.id }
-                textChildren = { roomName }
-                trigger = { actionsTrigger } />
-            {!collapsed && room?.participants
-                && Object.values(room?.participants || {}).map(p =>
-                    participantMatchesSearch(p, searchString) && (
-                        <ParticipantItem
-                            actionsTrigger = { ACTION_TRIGGER.HOVER }
-                            displayName = { p.displayName || defaultRemoteDisplayName }
-                            isHighlighted = { participantContextEntity?.jid === p.jid }
-                            key = { p.jid }
-                            local = { false }
-                            openDrawerForParticipant = { raiseParticipantMenu }
-                            overflowDrawer = { overflowDrawer }
-                            participantID = { p.jid }>
-                            {!overflowDrawer && moderator && (
-                                <ParticipantActionEllipsis
-                                    accessibilityLabel = { t('breakoutRoom.more') }
-                                    onClick = { toggleParticipantMenu({ room,
-                                        jid: p.jid,
-                                        participantName: p.displayName }) } />
-                            )}
-                        </ParticipantItem>
-                    ))
-            }
-        </>
-    );
+    return (<>
+        <ListItem
+            actions = { children }
+            className = { cx(styles.container, 'breakout-room-container') }
+            icon = { arrow }
+            isHighlighted = { isHighlighted }
+            onClick = { toggleCollapsed }
+            onLongPress = { raiseMenu }
+            onMouseLeave = { onLeave }
+            testId = { room.id }
+            textChildren = { roomName }
+            trigger = { actionsTrigger } />
+        {!collapsed && room?.participants
+            && Object.values(room?.participants || {}).map(p =>
+                participantMatchesSearch(p, searchString) && (
+                    <ParticipantItem
+                        actionsTrigger = { ACTION_TRIGGER.HOVER }
+                        displayName = { p.displayName || defaultRemoteDisplayName }
+                        isHighlighted = { participantContextEntity?.jid === p.jid }
+                        key = { p.jid }
+                        local = { false }
+                        openDrawerForParticipant = { raiseParticipantMenu }
+                        overflowDrawer = { overflowDrawer }
+                        participantID = { p.jid }>
+                        {!overflowDrawer && moderator && (
+                            <ParticipantActionEllipsis
+                                accessibilityLabel = { t('breakoutRoom.more') }
+                                onClick = { toggleParticipantMenu({ room,
+                                    jid: p.jid,
+                                    participantName: p.displayName }) } />
+                        )}
+                    </ParticipantItem>
+                ))
+        }
+    </>);
 };

react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { createBreakoutRoomsEvent } from '../../../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../../../analytics/functions';
 import Button from '../../../../../base/ui/components/web/Button';
-import { Theme } from '../../../../../base/ui/types';
 // @ts-ignore
 import { moveToRoom } from '../../../../../breakout-rooms/actions';
 
@@ -22,16 +23,16 @@ type Props = {
     };
 };
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         button: {
-            marginRight: `${theme.spacing(2)}px`
+            marginRight: theme.spacing(2)
         }
     };
 });
 
 const JoinActionButton = ({ room }: Props) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { t } = useTranslation();
     const dispatch = useDispatch();
 

react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 // @ts-ignore
 import { Avatar } from '../../../../../base/avatar';
 // @ts-ignore
 import { ContextMenu, ContextMenuItemGroup } from '../../../../../base/components';
 import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
-import { Theme } from '../../../../../base/ui/types';
 // @ts-ignore
 import { getBreakoutRooms } from '../../../../../breakout-rooms/functions';
 // @ts-ignore
@@ -18,6 +18,7 @@ import { showOverflowDrawer } from '../../../../../toolbox/functions.web';
 import SendToRoomButton from '../../../../../video-menu/components/web/SendToRoomButton';
 import { AVATAR_SIZE } from '../../../../constants';
 
+
 type Props = {
 
     /**
@@ -50,7 +51,7 @@ type Props = {
     onSelect: Function;
 };
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         text: {
             color: theme.palette.text02,
@@ -71,7 +72,7 @@ export const RoomParticipantContextMenu = ({
     onLeave,
     onSelect
 }: Props) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { t } = useTranslation();
     const isLocalModerator = useSelector(isLocalParticipantModerator);
     const lowerMenu = useCallback(() => onSelect(true), [ onSelect ]);

react/features/participants-pane/components/web/FooterContextMenu.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import {
     requestDisableAudioModeration,
@@ -41,7 +42,7 @@ import { SETTINGS_TABS } from '../../../settings/constants';
 // @ts-ignore
 import { MuteEveryonesVideoDialog } from '../../../video-menu/components';
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         contextMenu: {
             bottom: 'auto',
@@ -108,7 +109,7 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
 
     const enableVideoModeration = useCallback(() => dispatch(requestEnableVideoModeration()), [ dispatch ]);
 
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     const muteAllVideo = useCallback(
         () => dispatch(openDialog(MuteEveryonesVideoDialog)), [ dispatch ]);

react/features/participants-pane/components/web/LobbyParticipantItem.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React, { useCallback, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import ContextMenu from '../../../base/components/context-menu/ContextMenu';
 import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
@@ -37,15 +39,15 @@ type Props = {
     participant: Participant;
 };
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         button: {
-            marginRight: `${theme.spacing(2)}px`
+            marginRight: theme.spacing(2)
         },
         moreButton: {
             paddingRight: '6px',
             paddingLeft: '6px',
-            marginRight: `${theme.spacing(2)}px`
+            marginRight: theme.spacing(2)
         },
         contextMenu: {
             position: 'fixed',
@@ -64,7 +66,7 @@ export const LobbyParticipantItem = ({
     const [ admit, reject, chat ] = useLobbyActions({ participantID: id });
     const { t } = useTranslation();
     const [ isOpen, setIsOpen ] = useState(false);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const showChat = useSelector(showLobbyChatButton(p));
 

react/features/participants-pane/components/web/LobbyParticipants.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector, useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
@@ -23,7 +24,7 @@ import { useLobbyActions, useParticipantDrawer } from '../../hooks';
 // @ts-ignore
 import LobbyParticipantItems from './LobbyParticipantItems';
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         drawerActions: {
             listStyleType: 'none',
@@ -39,7 +40,6 @@ const useStyles = makeStyles((theme: any) => {
 
             '&:first-child': {
                 marginTop: '15px'
-
             },
 
             '&:hover': {
@@ -56,6 +56,7 @@ const useStyles = makeStyles((theme: any) => {
             justifyContent: 'space-between'
         },
         heading: {
+            // @ts-ignore
             ...withPixelLineHeight(theme.typography.heading7),
             color: theme.palette.text02
         },
@@ -76,7 +77,7 @@ export default function LobbyParticipants() {
     const lobbyEnabled = useSelector(getLobbyEnabled);
     const participants: Array<Object> = useSelector(getKnockingParticipants);
     const { t } = useTranslation();
-    const classes = useStyles();
+    const { classes } = useStyles();
     const dispatch = useDispatch();
     const admitAll = useCallback(() => {
         dispatch(admitMultiple(participants));

react/features/participants-pane/components/web/MeetingParticipants.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../app/types';
 // @ts-ignore
@@ -15,6 +17,7 @@ import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
 import { MEDIA_TYPE } from '../../../base/media/constants';
 import { getParticipantById } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux/functions';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Input from '../../../base/ui/components/web/Input';
 import { normalizeAccents } from '../../../base/util/strings.web';
 // @ts-ignore
@@ -34,17 +37,17 @@ import MeetingParticipantContextMenu from './MeetingParticipantContextMenu';
 // @ts-ignore
 import MeetingParticipantItems from './MeetingParticipantItems';
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         heading: {
             color: theme.palette.text02,
-            ...theme.typography.labelButton,
-            lineHeight: `${theme.typography.labelButton.lineHeight}px`,
+            // @ts-ignore
+            ...withPixelLineHeight(theme.typography.labelButton),
             margin: `8px 0 ${participantsPaneTheme.panePadding}px`,
 
             [`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
-                ...theme.typography.labelButtonLarge,
-                lineHeight: `${theme.typography.labelButtonLarge.lineHeight}px`
+                // @ts-ignore
+                ...withPixelLineHeight(theme.typography.labelButtonLarge)
             }
         },
 
@@ -109,7 +112,7 @@ function MeetingParticipants({
     const muteParticipantButtonText = t('dialog.muteParticipantButton');
     const isBreakoutRoom = useSelector(isInBreakoutRoom);
 
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <>

react/features/participants-pane/components/web/ParticipantItem.tsx

@@ -1,19 +1,22 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React, { ReactElement, useCallback } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
 import ListItem from '../../../base/components/participants-pane-list/ListItem';
 import { translate } from '../../../base/i18n/functions';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import {
     ACTION_TRIGGER,
     AudioStateIcons,
     MEDIA_STATE,
     type ActionTrigger,
-    type MediaState,
-    VideoStateIcons
+    VideoStateIcons,
+    MediaState
 } from '../../constants';
 
 import { RaisedHandIndicator } from './RaisedHandIndicator';
@@ -96,7 +99,7 @@ interface Props extends WithTranslation {
     youText?: string;
 }
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         nameContainer: {
             display: 'flex',
@@ -111,8 +114,7 @@ const useStyles = makeStyles((theme: any) => {
         },
 
         moderatorLabel: {
-            ...theme.typography.labelRegular,
-            lineHeight: `${theme.typography.labelRegular.lineHeight}px`,
+            ...withPixelLineHeight(theme.typography.labelRegular),
             color: theme.palette.text03
         }
     };
@@ -148,7 +150,7 @@ function ParticipantItem({
             displayName
         }), []);
 
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const icon = (
         <Avatar

react/features/participants-pane/components/web/ParticipantQuickAction.tsx

@@ -1,13 +1,15 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 // @ts-ignore
 import { approveParticipant } from '../../../av-moderation/actions';
 import Button from '../../../base/ui/components/web/Button';
-import { Theme } from '../../../base/ui/types';
+// @ts-ignore
 import { QUICK_ACTION_BUTTON } from '../../constants';
 
 type Props = {
@@ -48,10 +50,10 @@ type Props = {
     participantName: string;
 };
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         button: {
-            marginRight: `${theme.spacing(2)}px`
+            marginRight: theme.spacing(2)
         }
     };
 });
@@ -64,7 +66,7 @@ const ParticipantQuickAction = ({
     participantID,
     participantName
 }: Props) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const dispatch = useDispatch();
     const { t } = useTranslation();
 

react/features/participants-pane/components/web/ParticipantsPane.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
 
@@ -15,7 +16,6 @@ import { connect } from '../../../base/redux/functions';
 import Button from '../../../base/ui/components/web/Button';
 import ClickableIcon from '../../../base/ui/components/web/ClickableIcon';
 import { BUTTON_TYPES } from '../../../base/ui/constants';
-import { Theme } from '../../../base/ui/types';
 // @ts-ignore
 import { isAddBreakoutRoomButtonVisible } from '../../../breakout-rooms/functions';
 // @ts-ignore
@@ -107,10 +107,10 @@ type State = {
 const styles = (theme: Theme) => {
     return {
         container: {
-            boxSizing: 'border-box',
+            boxSizing: 'border-box' as const,
             flex: 1,
-            overflowY: 'auto',
-            position: 'relative',
+            overflowY: 'auto' as const,
+            position: 'relative' as const,
             padding: `0 ${participantsPaneTheme.panePadding}px`,
 
             [`& > * + *:not(.${participantsPaneTheme.ignoredChildClassName})`]: {
@@ -131,7 +131,7 @@ const styles = (theme: Theme) => {
 
         header: {
             alignItems: 'center',
-            boxSizing: 'border-box',
+            boxSizing: 'border-box' as const,
             display: 'flex',
             height: `${participantsPaneTheme.headerSize}px`,
             padding: '0 20px',
@@ -153,15 +153,15 @@ const styles = (theme: Theme) => {
         footer: {
             display: 'flex',
             justifyContent: 'flex-end',
-            padding: `${theme.spacing(4)}px ${participantsPaneTheme.panePadding}px`,
+            padding: `${theme.spacing(4)} ${participantsPaneTheme.panePadding}px`,
 
             '& > *:not(:last-child)': {
-                marginRight: `${theme.spacing(3)}px`
+                marginRight: theme.spacing(3)
             }
         },
 
         footerMoreContainer: {
-            position: 'relative'
+            position: 'relative' as const
         }
     };
 };
@@ -377,5 +377,4 @@ function _mapStateToProps(state: IState) {
     };
 }
 
-// @ts-ignore
 export default translate(connect(_mapStateToProps)(withStyles(styles)(ParticipantsPane)));

react/features/participants-pane/components/web/RaisedHandIndicator.tsx

@@ -1,15 +1,15 @@
-import { makeStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../base/icons/components/Icon';
 import { IconRaisedHandHollow } from '../../../base/icons/svg';
-import BaseTheme from '../../../base/ui/components/BaseTheme.web';
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         indicator: {
             backgroundColor: theme.palette.warning02,
-            borderRadius: `${theme.shape.borderRadius / 2}px`,
+            borderRadius: `${Number(theme.shape.borderRadius) / 2}px`,
             height: '24px',
             width: '24px'
         }
@@ -17,12 +17,12 @@ const useStyles = makeStyles((theme: any) => {
 });
 
 export const RaisedHandIndicator = () => {
-    const styles = useStyles();
+    const { classes: styles, theme } = useStyles();
 
     return (
         <div className = { styles.indicator }>
             <Icon
-                color = { BaseTheme.palette.uiBackground }
+                color = { theme.palette.uiBackground }
                 size = { 16 }
                 src = { IconRaisedHandHollow } />
         </div>

react/features/polls/components/web/PollAnswer.tsx

@@ -1,19 +1,20 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+
 
 import Button from '../../../base/ui/components/web/Button';
 import Checkbox from '../../../base/ui/components/web/Checkbox';
 import { BUTTON_TYPES } from '../../../base/ui/constants';
-import { Theme } from '../../../base/ui/types';
 // @ts-ignore
 import { isSubmitAnswerDisabled } from '../../functions';
 import AbstractPollAnswer, { AbstractProps } from '../AbstractPollAnswer';
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         buttonMargin: {
-            marginRight: `${theme.spacing(2)}px`
+            marginRight: theme.spacing(2)
         }
     };
 });
@@ -29,7 +30,7 @@ const PollAnswer = ({
     t
 }: AbstractProps) => {
     const { changingVote } = poll;
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className = 'poll-answer'>

react/features/polls/components/web/PollCreate.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../base/icons/components/Icon';
 import { IconMenu } from '../../../base/icons/svg';
@@ -8,17 +9,16 @@ import { IconMenu } from '../../../base/icons/svg';
 import { Tooltip } from '../../../base/tooltip';
 import Button from '../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants';
-import { Theme } from '../../../base/ui/types';
 import { ANSWERS_LIMIT, CHAR_LIMIT } from '../../constants';
 // @ts-ignore
 import AbstractPollCreate from '../AbstractPollCreate';
 // @ts-ignore
 import type { AbstractProps } from '../AbstractPollCreate';
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         buttonMargin: {
-            marginRight: `${theme.spacing(2)}px`
+            marginRight: theme.spacing(2)
         }
     };
 });
@@ -36,7 +36,7 @@ const PollCreate = ({
     setQuestion,
     t
 }: AbstractProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     /*
      * This ref stores the Array of answer input fields, allowing us to focus on them.

react/features/prejoin/components/DropdownButton.tsx

@@ -1,4 +1,5 @@
-import { withStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import React from 'react';
 
 import Icon from '../../base/icons/components/Icon';
@@ -43,7 +44,7 @@ type Props = {
  *
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         prejoinPreviewDropdownBtn: {
             alignItems: 'center',
@@ -53,10 +54,10 @@ const styles = (theme: any) => {
             height: 40,
             fontSize: 15,
             lineHeight: '24px',
-            padding: '0 16px',
+            padding: '0 16px', // @ts-ignore
             backgroundColor: theme.palette.field02,
 
-            '&:hover': {
+            '&:hover': { // @ts-ignore
                 backgroundColor: theme.palette.field02Hover
             }
         },

react/features/prejoin/components/dialogs/CallingDialog.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
@@ -34,7 +36,7 @@ interface Props extends WithTranslation {
     status: string;
 }
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         callingDialog: {
             padding: theme.spacing(3),
@@ -46,13 +48,13 @@ const useStyles = makeStyles((theme: any) => {
 
             '& .prejoin-dialog-calling-label': {
                 fontSize: '15px',
-                margin: `${theme.spacing(2)}px 0 ${theme.spacing(3)}px 0`
+                margin: `${theme.spacing(2)} 0 ${theme.spacing(3)} 0`
             },
 
             '& .prejoin-dialog-calling-number': {
                 fontSize: '19px',
                 lineHeight: '28px',
-                margin: `${theme.spacing(3)}px 0`
+                margin: `${theme.spacing(3)} 0`
             }
         }
     };
@@ -66,7 +68,7 @@ const useStyles = makeStyles((theme: any) => {
  */
 function CallingDialog(props: Props) {
     const { number, onClose, status, t } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     return (
         <div className = { classes.callingDialog }>

react/features/prejoin/components/dialogs/DialInDialog.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
@@ -46,14 +48,14 @@ interface Props extends WithTranslation {
     passCode: string;
 }
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         dialInDialog: {
             textAlign: 'center',
 
             '& .prejoin-dialog-dialin-header': {
                 alignItems: 'center',
-                margin: `${theme.spacing(3)}px 0 ${theme.spacing(5)}px ${theme.spacing(3)}px`,
+                margin: `${theme.spacing(3)} 0 ${theme.spacing(5)} ${theme.spacing(3)}`,
                 display: 'flex'
             },
             '& .prejoin-dialog-dialin-icon': {
@@ -70,7 +72,7 @@ const useStyles = makeStyles((theme: any) => {
 
                 '& .prejoin-dialog-dialin-num-container': {
                     minHeight: '48px',
-                    margin: `${theme.spacing(2)}px 0`
+                    margin: `${theme.spacing(2)} 0`
                 }
             },
 
@@ -110,7 +112,7 @@ function DialinDialog(props: Props) {
         passCode,
         t
     } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const flagClassName = `prejoin-dialog-flag iti-flag ${getCountryCodeFromPhone(
         number
     )}`;

react/features/prejoin/components/dialogs/DialOutDialog.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
@@ -31,18 +33,18 @@ interface Props extends WithTranslation {
     onTextButtonClick: Function;
 }
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         dialOutDialog: {
-            padding: `${theme.spacing(3)}px`
+            padding: theme.spacing(3)
         },
         header: {
             display: 'flex',
             justifyContent: 'space-between',
-            marginBottom: `${theme.spacing(4)}px`
+            marginBottom: theme.spacing(4)
         },
         picker: {
-            margin: `${theme.spacing(2)}px 0 ${theme.spacing(3)}px 0`
+            margin: `${theme.spacing(2)} 0 ${theme.spacing(3)} 0`
         }
     };
 });
@@ -56,7 +58,7 @@ const useStyles = makeStyles((theme: any) => {
  */
 function DialOutDialog(props: Props) {
     const { onClose, onTextButtonClick, onSubmit, t } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     return (
         <div className = { classes.dialOutDialog }>

react/features/prejoin/components/preview/DeviceStatus.tsx

@@ -1,7 +1,7 @@
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
@@ -29,7 +29,7 @@ export interface Props extends WithTranslation {
     deviceStatusType: string;
 }
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         deviceStatus: {
             alignItems: 'center',
@@ -84,10 +84,10 @@ const iconMap = {
  * @returns {ReactElement}
  */
 function DeviceStatus({ deviceStatusType, deviceStatusText, t }: Props) {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const { src, className } = iconMap[deviceStatusType as keyof typeof iconMap];
     const hasError = deviceStatusType === 'warning';
-    const containerClassName = clsx(classes.deviceStatus, { 'device-status-error': hasError });
+    const containerClassName = cx(classes.deviceStatus, { 'device-status-error': hasError });
 
     return (
         <div

react/features/reactions/actions.any.ts

@@ -29,7 +29,7 @@ export function setReactionQueue(queue: Array<ReactionEmojiProps>): ReactionsAct
  * @param {string} uid - Id of the reaction to be removed.
  * @returns {Function}
  */
-export function removeReaction(uid: string): Function {
+export function removeReaction(uid: string): any {
     return (dispatch: Function, getState: Function) => {
         const queue = getState()['features/reactions'].queue;
 

react/features/reactions/components/web/ReactionsMenu.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
+import { ClassNameMap, withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { createReactionMenuEvent, createToolbarEvent } from '../../../analytics/AnalyticsEvents';
@@ -12,8 +14,6 @@ import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
 import { raiseHand } from '../../../base/participants/actions';
 import { getLocalParticipant, hasRaisedHand } from '../../../base/participants/functions';
-import { connect } from '../../../base/redux/functions';
-import { Theme } from '../../../base/ui/types';
 import GifsMenu from '../../../gifs/components/web/GifsMenu';
 // @ts-ignore
 import GifsMenuButton from '../../../gifs/components/web/GifsMenuButton';
@@ -28,10 +28,6 @@ import { REACTIONS, REACTIONS_MENU_HEIGHT } from '../../constants';
 // @ts-ignore
 import ReactionButton from './ReactionButton';
 
-interface Classes {
-    overflow: string;
-}
-
 interface Props extends WithTranslation {
 
     /**
@@ -67,7 +63,7 @@ interface Props extends WithTranslation {
     /**
      * An object containing the CSS classes.
      */
-    classes: Classes;
+    classes: ClassNameMap<string>;
 
     /**
      * The Redux Dispatch function.
@@ -77,7 +73,7 @@ interface Props extends WithTranslation {
     /**
      * Whether or not it's displayed in the overflow menu.
      */
-    overflowMenu: boolean;
+    overflowMenu?: boolean;
 }
 
 const styles = (theme: Theme) => {
@@ -88,8 +84,8 @@ const styles = (theme: Theme) => {
             backgroundColor: theme.palette.ui01,
             boxShadow: 'none',
             borderRadius: 0,
-            position: 'relative',
-            boxSizing: 'border-box',
+            position: 'relative' as const,
+            boxSizing: 'border-box' as const,
             height: `${REACTIONS_MENU_HEIGHT}px`
         }
     };
@@ -265,8 +261,6 @@ function mapDispatchToProps(dispatch: IStore['dispatch']) {
         ...bindActionCreators(
         {
             _dockToolbox: dockToolbox
-
-        // @ts-ignore
         }, dispatch)
     };
 }
@@ -274,6 +268,4 @@ function mapDispatchToProps(dispatch: IStore['dispatch']) {
 export default translate(connect(
     mapStateToProps,
     mapDispatchToProps
-
-    // @ts-ignore
 )(withStyles(styles)(ReactionsMenu)));

react/features/recording/components/Recording/web/HighlightButton.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import React from 'react';
 
 // @ts-ignore
@@ -54,7 +55,7 @@ type State = {
  *
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         container: {
             position: 'relative'
@@ -63,11 +64,11 @@ const styles = (theme: any) => {
             background: theme.palette.text02,
             margin: '0 4px 4px 4px'
         },
-        regular: {
+        regular: { // @ts-ignore
             background: theme.palette.field02,
             margin: '0 4px 4px 4px'
         },
-        highlightNotification: {
+        highlightNotification: { // @ts-ignore
             backgroundColor: theme.palette.field02,
             borderRadius: '6px',
             boxShadow: '0px 6px 20px rgba(0, 0, 0, 0.25)',
@@ -81,7 +82,7 @@ const styles = (theme: any) => {
             top: '32px',
             width: 320
         },
-        highlightNotificationButton: {
+        highlightNotificationButton: { // @ts-ignore
             color: theme.palette.field01Focus,
             cursor: 'pointer',
             fontWeight: '600',

react/features/recording/components/web/RecordingLabel.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import React from 'react';
 
 import { translate } from '../../../base/i18n/functions';
@@ -18,7 +19,7 @@ import AbstractRecordingLabel, {
  *
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         [JitsiRecordingConstants.mode.STREAM]: {
             background: theme.palette.ui03

react/features/salesforce/components/web/RecordItem.tsx

@@ -1,6 +1,7 @@
-import { makeStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 import { RECORD_TYPE } from '../../constants';
 
@@ -30,7 +31,7 @@ type Props = {
     type: string;
 };
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         recordItem: {
             display: 'flex',
@@ -80,8 +81,8 @@ export const RecordItem = ({
     type
 }: Props) => {
     const { t } = useTranslation();
-    const classes = useStyles();
     const Icon = RECORD_TYPE[type as keyof typeof RECORD_TYPE].icon;
+    const { classes } = useStyles();
 
     return (
         <li

react/features/salesforce/components/web/SalesforceLinkDialog.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable lines-around-comment */
 import Spinner from '@atlaskit/spinner';
-import { makeStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 // @ts-ignore
 import { Dialog, hideDialog } from '../../../base/dialog';
@@ -11,7 +12,7 @@ import Icon from '../../../base/icons/components/Icon';
 import { IconSearch } from '../../../base/icons/svg';
 // @ts-ignore
 import { getFieldValue } from '../../../base/react';
-import BaseTheme from '../../../base/ui/components/BaseTheme.web';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { NOTES_MAX_LENGTH } from '../../constants';
 // @ts-ignore
 import { useSalesforceLinkDialog } from '../../useSalesforceLinkDialog';
@@ -19,7 +20,7 @@ import { useSalesforceLinkDialog } from '../../useSalesforceLinkDialog';
 import { RecordItem } from './RecordItem';
 
 // @ts-ignore
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         container: {
             minHeight: '450px',
@@ -54,8 +55,7 @@ const useStyles = makeStyles((theme: any) => {
             height: 40,
             '&::placeholder': {
                 color: theme.palette.text03,
-                ...theme.typography.bodyShortRegular,
-                lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
+                ...withPixelLineHeight(theme.typography.bodyShortRegular)
             }
         },
         spinner: {
@@ -106,6 +106,7 @@ const useStyles = makeStyles((theme: any) => {
             border: '1px solid',
             borderColor: theme.palette.ui05,
             backgroundColor: theme.palette.field01,
+            // @ts-ignore
             color: theme.palette.field02,
             borderRadius: theme.shape.borderRadius,
             padding: '10px 16px'
@@ -121,7 +122,7 @@ const useStyles = makeStyles((theme: any) => {
  */
 function SalesforceLinkDialog() {
     const { t } = useTranslation();
-    const classes = useStyles();
+    const { classes, theme } = useStyles();
     const dispatch = useDispatch();
     const {
         hasDetailsErrors,
@@ -190,7 +191,7 @@ function SalesforceLinkDialog() {
         <div className = { classes.recordsSearchContainer }>
             <Icon
                 className = { classes.searchIcon }
-                color = { BaseTheme.palette.icon03 }
+                color = { theme.palette.icon03 }
                 src = { IconSearch } />
             <input
                 autoComplete = 'off'

react/features/settings/components/web/SettingsDialog.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import React, { Component } from 'react';
 
 import { IState } from '../../../app/types';
@@ -86,7 +87,7 @@ type Props = {
  *
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         settingsDialog: {
             display: 'flex',
@@ -97,7 +98,7 @@ const styles = (theme: any) => {
             },
 
             '& .auth-name': {
-                marginBottom: `${theme.spacing(1)}px`
+                marginBottom: theme.spacing(1)
             },
 
             '& .calendar-tab, & .device-selection': {
@@ -109,7 +110,7 @@ const styles = (theme: any) => {
                 fontSize: '12px',
                 fontWeight: 600,
                 lineHeight: 1.33,
-                padding: `20px 0px ${theme.spacing(1)}px 0px`
+                padding: `20px 0px ${theme.spacing(1)} 0px`
             },
 
             '& input[type="checkbox"]:checked + svg': {
@@ -138,7 +139,7 @@ const styles = (theme: any) => {
             '& .profile-edit-field': {
                 flex: 0.5,
                 marginRight: '20px',
-                marginTop: `${theme.spacing(3)}px`
+                marginTop: theme.spacing(3)
             },
 
             '& .settings-sub-pane': {
@@ -159,7 +160,7 @@ const styles = (theme: any) => {
 
             '& .settings-checkbox': {
                 display: 'flex',
-                marginBottom: `${theme.spacing(2)}px`
+                marginBottom: theme.spacing(2)
             },
 
             '& .moderator-settings-wrapper': {

react/features/speaker-stats/components/web/FaceExpressionsSwitch.tsx

@@ -1,12 +1,12 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Switch from '../../../base/ui/components/web/Switch';
-import { Theme } from '../../../base/ui/types';
 
-// @ts-ignore
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         switchContainer: {
             display: 'flex',
@@ -15,8 +15,7 @@ const useStyles = makeStyles((theme: Theme) => {
 
         switchLabel: {
             marginRight: 10,
-            ...theme.typography.bodyShortRegular,
-            lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
+            ...withPixelLineHeight(theme.typography.bodyShortRegular)
         }
     };
 });
@@ -44,7 +43,7 @@ type Props = {
  * @returns {React$Element<any>}
  */
 export default function FaceExpressionsSwitch({ onChange, showFaceExpressions }: Props) {
-    const classes = useStyles();
+    const { classes } = useStyles();
     const { t } = useTranslation();
 
     return (

react/features/speaker-stats/components/web/SpeakerStats.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 import React, { useCallback, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../app/types';
 // @ts-ignore
@@ -20,7 +21,7 @@ import SpeakerStatsLabels from './SpeakerStatsLabels';
 import SpeakerStatsList from './SpeakerStatsList';
 import SpeakerStatsSearch from './SpeakerStatsSearch';
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         speakerStats: {
             '& .row': {
@@ -96,7 +97,7 @@ const SpeakerStats = () => {
     const displaySwitch = faceLandmarks?.enableDisplayFaceExpressions && clientWidth > DISPLAY_SWITCH_BREAKPOINT;
     const displayLabels = clientWidth > MOBILE_BREAKPOINT;
     const dispatch = useDispatch();
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     const onToggleFaceExpressions = useCallback(() =>
         dispatch(toggleFaceExpressions())

react/features/speaker-stats/components/web/SpeakerStatsLabels.tsx

@@ -1,12 +1,15 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { Tooltip } from '../../../base/tooltip';
 import { FACE_EXPRESSIONS_EMOJIS } from '../../../face-landmarks/constants';
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         labels: {
             padding: '22px 0 7px 0',
@@ -14,8 +17,7 @@ const useStyles = makeStyles((theme: any) => {
         },
         emojis: {
             paddingLeft: 27,
-            ...theme.typography.bodyShortRegularLarge,
-            lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+            ...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
         }
     };
 });
@@ -33,7 +35,7 @@ type Props = {
 
 const SpeakerStatsLabels = (props: Props) => {
     const { t } = useTranslation();
-    const classes = useStyles();
+    const { classes } = useStyles();
     const nameTimeClass = `name-time${
         props.showFaceExpressions ? ' name-time_expressions-on' : ''
     }`;

react/features/speaker-stats/components/web/SpeakerStatsList.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { MOBILE_BREAKPOINT } from '../../constants';
 // @ts-ignore
 import abstractSpeakerStatsList from '../AbstractSpeakerStatsList';
@@ -9,20 +11,20 @@ import abstractSpeakerStatsList from '../AbstractSpeakerStatsList';
 // @ts-ignore
 import SpeakerStatsItem from './SpeakerStatsItem';
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         list: {
-            marginTop: `${theme.spacing(3)}px`,
-            marginBottom: `${theme.spacing(3)}px`
+            marginTop: theme.spacing(3),
+            marginBottom: theme.spacing(3)
         },
         item: {
-            height: `${theme.spacing(7)}px`,
+            height: theme.spacing(7),
             [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
-                height: `${theme.spacing(8)}px`
+                height: theme.spacing(8)
             }
         },
         avatar: {
-            height: `${theme.spacing(5)}px`
+            height: theme.spacing(5)
         },
         expressions: {
             paddingLeft: 29
@@ -31,21 +33,17 @@ const useStyles = makeStyles((theme: any) => {
             color: theme.palette.text03
         },
         displayName: {
-            ...theme.typography.bodyShortRegular,
-            lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
+            ...withPixelLineHeight(theme.typography.bodyShortRegular),
             [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
-                ...theme.typography.bodyShortRegularLarge,
-                lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+                ...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
             }
         },
         time: {
             padding: '2px 4px',
             borderRadius: '4px',
-            ...theme.typography.labelBold,
-            lineHeight: `${theme.typography.labelBold.lineHeight}px`,
+            ...withPixelLineHeight(theme.typography.labelBold),
             [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
-                ...theme.typography.bodyShortRegularLarge,
-                lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+                ...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
             }
         },
         dominant: {
@@ -60,7 +58,7 @@ const useStyles = makeStyles((theme: any) => {
  * @returns {React$Element<any>}
  */
 const SpeakerStatsList = () => {
-    const classes = useStyles();
+    const { classes } = useStyles();
     const items = abstractSpeakerStatsList(SpeakerStatsItem, classes);
 
     return (

react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx

@@ -1,19 +1,20 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../base/icons/components/Icon';
 import { IconSearch } from '../../../base/icons/svg';
 // @ts-ignore
 import { getFieldValue } from '../../../base/react';
-import BaseTheme from '../../../base/ui/components/BaseTheme.web';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { MOBILE_BREAKPOINT } from '../../constants';
 // @ts-ignore
 import { isSpeakerStatsSearchDisabled } from '../../functions';
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         speakerStatsSearchContainer: {
             position: 'relative'
@@ -41,15 +42,13 @@ const useStyles = makeStyles((theme: any) => {
             height: 40,
             '&::placeholder': {
                 color: theme.palette.text03,
-                ...theme.typography.bodyShortRegular,
-                lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
+                ...withPixelLineHeight(theme.typography.bodyShortRegular)
             },
             [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
                 height: 48,
                 padding: '13px 16px 13px 44px',
                 '&::placeholder': {
-                    ...theme.typography.bodyShortRegularLarge,
-                    lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+                    ...withPixelLineHeight(theme.typography.bodyShortRegular)
                 }
             }
         }
@@ -74,7 +73,7 @@ type Props = {
  * @returns {React$Element<any>}
  */
 function SpeakerStatsSearch({ onSearch }: Props) {
-    const classes = useStyles();
+    const { classes, theme } = useStyles();
     const { t } = useTranslation();
     const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled);
     const [ searchValue, setSearchValue ] = useState<string>('');
@@ -105,7 +104,7 @@ function SpeakerStatsSearch({ onSearch }: Props) {
         <div className = { classes.speakerStatsSearchContainer }>
             <Icon
                 className = { classes.searchIcon }
-                color = { BaseTheme.palette.icon03 }
+                color = { theme.palette.icon03 }
                 src = { IconSearch } />
             <input
                 autoComplete = 'off'

react/features/subtitles/components/LanguageList.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 
 import LanguageListItem from './LanguageListItem';
@@ -10,7 +10,7 @@ interface ILanguageListProps {
     selectedLanguage: string;
 }
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles()(() => {
     return {
         itemsContainer: {
             display: 'flex',
@@ -35,7 +35,7 @@ const LanguageList = ({
     items,
     onLanguageSelected
 }: ILanguageListProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const listItems = items.map(item => (<LanguageListItem
         key = { item.id }
         lang = { item.lang }

react/features/subtitles/components/LanguageListItem.tsx

@@ -1,11 +1,11 @@
-import { makeStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
 import { translate } from '../../base/i18n/functions';
 import Icon from '../../base/icons/components/Icon';
 import { IconCheck } from '../../base/icons/svg';
-import { Theme } from '../../base/ui/types';
 
 interface ILanguageListItemProps extends WithTranslation {
 
@@ -25,7 +25,7 @@ interface ILanguageListItemProps extends WithTranslation {
     selected?: boolean;
 }
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         itemContainer: {
             display: 'flex',
@@ -56,7 +56,7 @@ const LanguageListItem = ({
     selected,
     onLanguageSelected
 }: ILanguageListItemProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const onLanguageSelectedWrapper = useCallback(() => onLanguageSelected(lang), [ lang ]);
 
     return (

react/features/toolbox/components/web/Drawer.tsx

@@ -1,5 +1,6 @@
-import { makeStyles } from '@material-ui/core';
+import { Theme } from '@mui/material';
 import React, { ReactElement, useCallback } from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import { DRAWER_MAX_HEIGHT } from '../../constants';
 
@@ -27,7 +28,7 @@ type Props = {
     onClose: Function;
 };
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         drawer: {
             backgroundColor: theme.palette.ui02,
@@ -47,7 +48,7 @@ function Drawer({
     isOpen,
     onClose
 }: Props) {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     /**
      * Handles clicks within the menu, preventing the propagation of the click event.

react/features/toolbox/components/web/OverflowMenuButton.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable lines-around-comment */
 import InlineDialog from '@atlaskit/inline-dialog';
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@mui/styles';
 import React, { Component, ReactElement } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 
 import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
 import { IState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
-import { connect } from '../../../base/redux/functions';
 // @ts-ignore
 import { ReactionEmoji, ReactionsMenu } from '../../../reactions/components';
 import { type ReactionEmojiProps, REACTIONS_MENU_HEIGHT } from '../../../reactions/constants';
@@ -71,7 +71,7 @@ interface Props extends WithTranslation {
 const styles = () => {
     return {
         overflowMenuDrawer: {
-            overflowY: 'auto',
+            overflowY: 'auto' as const,
             height: `calc(${DRAWER_MAX_HEIGHT} - ${REACTIONS_MENU_HEIGHT}px - 16px)`
         }
     };
@@ -209,5 +209,4 @@ function mapStateToProps(state: IState) {
     };
 }
 
-// @ts-ignore
 export default withStyles(styles)(translate(connect(mapStateToProps)(OverflowMenuButton)));

react/features/toolbox/components/web/Toolbox.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@mui/styles';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { batch } from 'react-redux';
@@ -244,7 +244,6 @@ interface Props extends WithTranslation {
      */
     _isProfileDisabled: boolean;
 
-
     /**
      * Whether or not the current meeting belongs to a JaaS user.
      */
@@ -341,16 +340,17 @@ declare let APP: any;
 const styles = () => {
     return {
         contextMenu: {
-            position: 'relative',
+            position: 'relative' as const,
             right: 'auto',
             maxHeight: 'inherit',
             margin: 0
         },
+
         hangupMenu: {
-            position: 'relative',
+            position: 'relative' as const,
             right: 'auto',
             display: 'flex',
-            flexDirection: 'column',
+            flexDirection: 'column' as const,
             rowGap: '8px',
             margin: 0,
             padding: '16px'
@@ -1537,5 +1537,4 @@ function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
     };
 }
 
-// @ts-ignore
 export default translate(connect(_mapStateToProps)(withStyles(styles)(Toolbox)));

react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@mui/styles';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
-import { batch, connect } from 'react-redux';
+import { batch } from 'react-redux';
 
 import { IState } from '../../../app/types';
 import ContextMenu from '../../../base/components/context-menu/ContextMenu';
@@ -14,6 +14,7 @@ import { IconHorizontalPoints } from '../../../base/icons/svg';
 import { getLocalParticipant } from '../../../base/participants/functions';
 // @ts-ignore
 import { Popover } from '../../../base/popover';
+import { connect } from '../../../base/redux/functions';
 // @ts-ignore
 import { setParticipantContextMenuOpen } from '../../../base/responsive-ui/actions';
 // @ts-ignore
@@ -125,7 +126,7 @@ const styles = () => {
         },
 
         contextMenu: {
-            position: 'relative',
+            position: 'relative' as const,
             marginTop: 0,
             right: 'auto',
             padding: '0',
@@ -308,5 +309,4 @@ function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
     };
 }
 
-// @ts-ignore
 export default translate(connect(_mapStateToProps)(withStyles(styles)(LocalVideoMenuTriggerButton)));

react/features/video-menu/components/web/ParticipantContextMenu.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../../app/types';
 // @ts-ignore
@@ -117,7 +119,7 @@ type Props = {
     thumbnailMenu?: boolean;
 };
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         text: {
             color: theme.palette.text02,
@@ -146,7 +148,7 @@ const ParticipantContextMenu = ({
 }: Props) => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const localParticipant = useSelector(getLocalParticipant);
     const _isModerator = Boolean(localParticipant?.role === PARTICIPANT_ROLE.MODERATOR);

react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/styles';
+import { withStyles } from '@mui/styles';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
-import { batch, connect } from 'react-redux';
+import { batch } from 'react-redux';
 
 import { IState } from '../../../app/types';
 import { isMobileBrowser } from '../../../base/environment/utils';
@@ -13,6 +13,7 @@ import { getParticipantById } from '../../../base/participants/functions';
 import { Participant } from '../../../base/participants/types';
 // @ts-ignore
 import { Popover } from '../../../base/popover';
+import { connect } from '../../../base/redux/functions';
 // @ts-ignore
 import { setParticipantContextMenuOpen } from '../../../base/responsive-ui/actions';
 import Button from '../../../base/ui/components/web/Button';
@@ -120,7 +121,7 @@ const styles = () => {
         },
 
         contextMenu: {
-            position: 'relative',
+            position: 'relative' as const,
             marginTop: 0,
             right: 'auto',
             padding: '0',
@@ -302,13 +303,12 @@ function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
         _disabled: remoteVideoMenu?.disabled,
         _menuPosition,
         _overflowDrawer: overflowDrawer,
-        _participant: participant,
-        _participantDisplayName,
+        _participant: participant ?? { id: '' },
+        _participantDisplayName: _participantDisplayName ?? '',
         _remoteControlState,
         _showConnectionInfo: showConnectionInfo
     };
 }
 
 export default translate(connect(_mapStateToProps)(
-    // @ts-ignore
     withStyles(styles)(RemoteVideoMenuTriggerButton)));

react/features/video-menu/components/web/VolumeSlider.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
@@ -44,13 +45,13 @@ type State = {
     volumeLevel: number;
 };
 
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         container: {
             minHeight: '40px',
             minWidth: '180px',
             width: '100%',
-            boxSizing: 'border-box',
+            boxSizing: 'border-box' as const,
             cursor: 'pointer',
             display: 'flex',
             alignItems: 'center',
@@ -64,17 +65,17 @@ const styles = (theme: any) => {
         icon: {
             minWidth: '20px',
             padding: '5px',
-            position: 'relative'
+            position: 'relative' as const
         },
 
         sliderContainer: {
-            position: 'relative',
+            position: 'relative' as const,
             width: '100%',
             paddingRight: '5px'
         },
 
         slider: {
-            position: 'absolute',
+            position: 'absolute' as const,
             width: '100%',
             top: '50%',
             transform: 'translate(0, -50%)'
@@ -168,5 +169,4 @@ class VolumeSlider extends Component<Props, State> {
     }
 }
 
-// @ts-ignore
 export default translate(withStyles(styles)(VolumeSlider));

react/features/video-quality/components/Slider.tsx

@@ -1,8 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React from 'react';
-
-import { commonClassName } from '../../base/ui/constants';
+import { makeStyles } from 'tss-react/mui';
 
 type Props = {
 
@@ -37,7 +35,7 @@ type Props = {
     value: number;
 };
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     // keep the same height for all elements:
     // input, input track & fake track(div)
     const height = 6;
@@ -54,7 +52,7 @@ const useStyles = makeStyles((theme: any) => {
         width: 24
     };
 
-    const focused = {
+    const focused = { // @ts-ignore
         outline: `1px solid ${theme.palette.action03Focus}`
     };
 
@@ -83,7 +81,7 @@ const useStyles = makeStyles((theme: any) => {
         },
         track: {
             background: theme.palette.ui02,
-            borderRadius: theme.shape.borderRadius / 2,
+            borderRadius: Number(theme.shape.borderRadius) / 2,
             height
         },
         slider: {
@@ -141,12 +139,12 @@ const useStyles = makeStyles((theme: any) => {
  *  @returns {ReactElement}
  */
 function Slider({ ariaLabel, max, min, onChange, step, value }: Props) {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const knobs = [ ...Array(Math.floor((max - min) / step) + 1) ];
 
     return (
         <div className = { classes.sliderContainer }>
-            <ul className = { clsx(commonClassName.emptyList, classes.knobContainer) }>
+            <ul className = { cx('empty-list', classes.knobContainer) }>
                 {knobs.map((_, i) => (
                     <li
                         className = { classes.knob }
@@ -155,7 +153,7 @@ function Slider({ ariaLabel, max, min, onChange, step, value }: Props) {
             <div className = { classes.track } />
             <input
                 aria-label = { ariaLabel }
-                className = { clsx(classes.slider, 'custom-slider') }
+                className = { cx(classes.slider, 'custom-slider') }
                 max = { max }
                 min = { min }
                 onChange = { onChange }

react/features/video-quality/components/VideoQualitySlider.web.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable lines-around-comment */
-import { withStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
@@ -90,7 +91,7 @@ interface Props extends WithTranslation {
  *
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         dialog: {
             color: theme.palette.text01

react/features/virtual-background/components/UploadImageButton.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable lines-around-comment */
-import { makeStyles } from '@material-ui/styles';
+
+import { Theme } from '@mui/material';
 import React, { useCallback, useRef } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 import { v4 as uuidv4 } from 'uuid';
 
 import { translate } from '../../base/i18n/functions';
@@ -42,10 +44,10 @@ interface Props extends WithTranslation {
 }
 
 // @ts-ignore
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         addBackground: {
-            marginRight: `${theme.spacing(2)}px`
+            marginRight: theme.spacing(2)
         },
         button: {
             display: 'none'
@@ -55,8 +57,8 @@ const useStyles = makeStyles((theme: any) => {
             fontWeight: '600',
             lineHeight: '20px',
             marginLeft: '-10px',
-            marginTop: `${theme.spacing(3)}px`,
-            marginBottom: `${theme.spacing(2)}px`,
+            marginTop: theme.spacing(3),
+            marginBottom: theme.spacing(2),
             color: '#669aec',
             display: 'inline-flex',
             cursor: 'pointer'
@@ -78,7 +80,7 @@ function UploadImageButton({
     storedImages,
     t
 }: Props) {
-    const classes = useStyles();
+    const { classes } = useStyles();
     const uploadImageButton = useRef<HTMLInputElement>(null);
     const uploadImageKeyPress = useCallback(e => {
         if (uploadImageButton.current && (e.key === ' ' || e.key === 'Enter')) {

react/features/virtual-background/components/VirtualBackgroundDialog.tsx

@@ -4,11 +4,11 @@ import Spinner from '@atlaskit/spinner';
 import Bourne from '@hapi/bourne';
 // @ts-ignore
 import { jitsiLocalStorage } from '@jitsi/js-utils/jitsi-local-storage';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { Theme } from '@mui/material';
 import React, { useState, useEffect, useCallback } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../app/types';
 // @ts-ignore
@@ -126,7 +126,7 @@ function _mapStateToProps(state: IState): Object {
 
 const VirtualBackgroundDialog = translate(connect(_mapStateToProps)(VirtualBackground));
 
-const useStyles = makeStyles((theme: any) => {
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         container: {
             display: 'flex',
@@ -152,7 +152,7 @@ const useStyles = makeStyles((theme: any) => {
                 border: '2px solid #99bbf3'
             },
             '& .background-option': {
-                marginTop: `${theme.spacing(2)}px`,
+                marginTop: theme.spacing(2),
                 borderRadius: `${theme.shape.borderRadius}px`,
                 height: '60px',
                 width: '107px',
@@ -295,7 +295,7 @@ function VirtualBackground({
     initialOptions,
     t
 }: Props) {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const [ previewIsLoaded, setPreviewIsLoaded ] = useState(false);
     const [ options, setOptions ] = useState<any>({ ...initialOptions });
     const localImages = jitsiLocalStorage.getItem('virtualBackgrounds');
@@ -575,7 +575,7 @@ function VirtualBackground({
                         showLabel = { previewIsLoaded }
                         storedImages = { storedImages } />}
                     <div
-                        className = { clsx(classes.dialog, { [classes.dialogMarginTop]: previewIsLoaded }) }
+                        className = { cx(classes.dialog, { [classes.dialogMarginTop]: previewIsLoaded }) }
                         role = 'radiogroup'
                         tabIndex = { -1 }>
                         <Tooltip
@@ -584,7 +584,7 @@ function VirtualBackground({
                             <div
                                 aria-checked = { _selectedThumbnail === 'none' }
                                 aria-label = { t('virtualBackground.removeBackground') }
-                                className = { clsx('background-option', 'virtual-background-none', {
+                                className = { cx('background-option', 'virtual-background-none', {
                                     'none-selected': _selectedThumbnail === 'none'
                                 }) }
                                 onClick = { removeBackground }
@@ -600,7 +600,7 @@ function VirtualBackground({
                             <div
                                 aria-checked = { _selectedThumbnail === 'slight-blur' }
                                 aria-label = { t('virtualBackground.slightBlur') }
-                                className = { clsx('background-option', 'slight-blur', {
+                                className = { cx('background-option', 'slight-blur', {
                                     'slight-blur-selected': _selectedThumbnail === 'slight-blur'
                                 }) }
                                 onClick = { enableSlideBlur }
@@ -616,7 +616,7 @@ function VirtualBackground({
                             <div
                                 aria-checked = { _selectedThumbnail === 'blur' }
                                 aria-label = { t('virtualBackground.blur') }
-                                className = { clsx('background-option', 'blur', {
+                                className = { cx('background-option', 'blur', {
                                     'blur-selected': _selectedThumbnail === 'blur'
                                 }) }
                                 onClick = { enableBlur }
@@ -633,7 +633,7 @@ function VirtualBackground({
                                 <div
                                     aria-checked = { _selectedThumbnail === 'desktop-share' }
                                     aria-label = { t('virtualBackground.desktopShare') }
-                                    className = { clsx('background-option', 'desktop-share', {
+                                    className = { cx('background-option', 'desktop-share', {
                                         'desktop-share-selected': _selectedThumbnail === 'desktop-share'
                                     }) }
                                     onClick = { shareDesktop }
@@ -675,7 +675,7 @@ function VirtualBackground({
                                 <img
                                     alt = { t('virtualBackground.uploadedImage', { index: index + 1 }) }
                                     aria-checked = { _selectedThumbnail === image.id }
-                                    className = { clsx('background-option', {
+                                    className = { cx('background-option', {
                                         'thumbnail-selected': _selectedThumbnail === image.id,
                                         'thumbnail': _selectedThumbnail !== image.id
                                     }) }

react/features/virtual-background/components/VirtualBackgroundPreview.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable lines-around-comment */
 import Spinner from '@atlaskit/spinner';
-import { withStyles } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import React, { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
 
@@ -89,7 +90,7 @@ type State = {
  *
  * @returns {Object}
  */
-const styles = (theme: any) => {
+const styles = (theme: Theme) => {
     return {
         virtualBackgroundPreview: {
             '& .video-preview': {
@@ -100,7 +101,7 @@ const styles = (theme: any) => {
                 marginLeft: '-10px',
                 height: '250px',
                 width: '570px',
-                marginBottom: `${theme.spacing(2)}px`,
+                marginBottom: theme.spacing(2),
                 zIndex: 2,
 
                 '@media (max-width: 632px)': {
@@ -112,7 +113,7 @@ const styles = (theme: any) => {
                 borderRadius: '6px',
                 backgroundColor: 'transparent',
                 height: '250px',
-                marginBottom: `${theme.spacing(2)}px`,
+                marginBottom: theme.spacing(2),
                 width: '572px',
                 position: 'fixed',
                 zIndex: 2,