@iobroker/adapter-react-v5 6.0.0 → 6.0.1

package/Components/CustomModal.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IobTheme } from '../types';
 interface CustomModalProps {
     icon?: any;
     open: boolean;
@@ -19,6 +20,7 @@ interface CustomModalProps {
     progress?: boolean;
     textInput?: boolean;
     defaultValue?: string;
+    theme: IobTheme;
 }
 declare const CustomModal: (props: CustomModalProps) => React.JSX.Element;
 export default CustomModal;

package/Components/CustomModal.js

@@ -46,11 +46,11 @@ const styles = {
     content: {
         fontSize: 16,
     },
-    languageButton: (theme) => ({
+    languageButton: {
         position: 'absolute',
         right: 8,
         top: 8,
-    }),
+    },
     languageButtonActive: (theme) => ({
         color: theme.palette.primary.main,
     }),
@@ -69,7 +69,7 @@ const CustomModal = (props) => {
         title && react_1.default.createElement(material_1.DialogTitle, null,
             icon ? react_1.default.createElement(Icon, { style: styles.titleIcon }) : null,
             title,
-            i18n_1.default.getLanguage() !== 'en' && toggleTranslation ? react_1.default.createElement(material_1.IconButton, { size: "large", sx: Utils_1.default.getStyle(styles.languageButton, noTranslation && styles.languageButtonActive), onClick: () => toggleTranslation(), title: i18n_1.default.t('Disable/Enable translation') },
+            i18n_1.default.getLanguage() !== 'en' && toggleTranslation ? react_1.default.createElement(material_1.IconButton, { size: "large", sx: Utils_1.default.getStyle(props.theme, styles.languageButton, noTranslation && styles.languageButtonActive), onClick: () => toggleTranslation(), title: i18n_1.default.t('Disable/Enable translation') },
                 react_1.default.createElement(icons_material_1.Language, null)) : null),
         react_1.default.createElement(material_1.DialogContent, { style: Object.assign(Object.assign(Object.assign({}, styles.content), (overflowHidden ? styles.overflowHidden : undefined)), { paddingTop: 8 }) },
             textInput && react_1.default.createElement(material_1.TextField

package/Components/ObjectBrowser.js

@@ -719,37 +719,6 @@ const styles = {
         display: 'flex',
     },
 };
-function getStyle(theme, ...args) {
-    const result = {};
-    for (let a = 0; a < args.length; a++) {
-        if (typeof args[a] === 'function') {
-            Object.assign(result, args[a](theme));
-        }
-        else if (args[a] && typeof args[a] === 'object') {
-            Object.keys(args[a]).forEach((attr) => {
-                if (typeof args[a][attr] === 'function') {
-                    result[attr] = args[a][attr](theme);
-                }
-                else if (typeof args[a][attr] === 'object') {
-                    const obj = args[a][attr];
-                    result[attr] = {};
-                    Object.keys(obj).forEach((attr1) => {
-                        if (typeof obj[attr1] === 'function') {
-                            result[attr][attr1] = obj(theme);
-                        }
-                        else if (obj[attr1] || obj[attr1] === 0) {
-                            result[attr][attr1] = obj[attr1];
-                        }
-                    });
-                }
-                else if (args[a][attr] || args[a][attr] === 0) {
-                    result[attr] = args[a][attr];
-                }
-            });
-        }
-    }
-    return result;
-}
 /**
  * Function that walks through all keys of an object or array and applies a function to each key.
  */
@@ -2793,7 +2762,7 @@ class ObjectBrowserClass extends react_1.Component {
             return null;
         }
         return react_1.default.createElement(material_1.Dialog, { onClose: () => this.setState({ columnsSelectorShow: false }), open: !0, sx: {
-                '& .MuiPaper-root': getStyle(this.props.theme, styles.dialogColumns, styles[`transparent_${this.state.columnsDialogTransparent}`]),
+                '& .MuiPaper-root': Utils_1.default.getStyle(this.props.theme, styles.dialogColumns, styles[`transparent_${this.state.columnsDialogTransparent}`]),
             } },
             react_1.default.createElement(material_1.DialogTitle, { sx: styles.fontSizeTitle }, this.props.t('ra_Configure')),
             react_1.default.createElement(material_1.DialogContent, { sx: styles.fontSizeTitle },
@@ -4440,7 +4409,7 @@ class ObjectBrowserClass extends react_1.Component {
                 useDesc = !!oTooltip;
             }
         }
-        return react_1.default.createElement(material_1.Grid, { container: true, direction: "row", wrap: "nowrap", sx: getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
+        return react_1.default.createElement(material_1.Grid, { container: true, direction: "row", wrap: "nowrap", sx: Utils_1.default.getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
                 !item.data.visible &&
                 !item.data.hasVisibleChildren &&
                 styles.filteredParentOut, this.state.selected.includes(id) && styles.itemSelected, this.state.selectedNonObject === id && styles.itemSelected), key: id, id: id, onMouseDown: e => {
@@ -5341,26 +5310,26 @@ class ObjectBrowserClass extends react_1.Component {
         this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer);
         if (this.styleTheme !== this.props.themeType) {
             this.styles = {
-                cellIdIconFolder: getStyle(this.props.theme, styles.cellIdIconFolder),
-                cellIdIconDocument: getStyle(this.props.theme, styles.cellIdIconDocument),
-                iconDeviceError: getStyle(this.props.theme, styles.iconDeviceError),
-                iconDeviceConnected: getStyle(this.props.theme, styles.iconDeviceConnected),
-                iconDeviceDisconnected: getStyle(this.props.theme, styles.iconDeviceDisconnected),
-                cellButtonsButtonWithCustoms: getStyle(this.props.theme, styles.cellButtonsButtonWithCustoms),
-                invertedBackground: getStyle(this.props.theme, styles.invertedBackground),
-                invertedBackgroundFlex: getStyle(this.props.theme, styles.invertedBackgroundFlex),
-                contextMenuEdit: getStyle(this.props.theme, styles.contextMenuEdit),
-                contextMenuEditValue: getStyle(this.props.theme, styles.contextMenuEditValue),
-                contextMenuView: getStyle(this.props.theme, styles.contextMenuView),
-                contextMenuCustom: getStyle(this.props.theme, styles.contextMenuCustom),
-                contextMenuACL: getStyle(this.props.theme, styles.contextMenuACL),
-                contextMenuRoom: getStyle(this.props.theme, styles.contextMenuRoom),
-                contextMenuRole: getStyle(this.props.theme, styles.contextMenuRole),
-                contextMenuDelete: getStyle(this.props.theme, styles.contextMenuDelete),
-                filterInput: getStyle(this.props.theme, styles.headerCellInput, styles.filterInput),
-                iconCopy: getStyle(this.props.theme, styles.cellButtonsValueButton, styles.cellButtonsValueButtonCopy),
-                aliasReadWrite: getStyle(styles.cellIdAlias, styles.cellIdAliasReadWrite),
-                aliasAlone: getStyle(styles.cellIdAlias, styles.cellIdAliasAlone),
+                cellIdIconFolder: Utils_1.default.getStyle(this.props.theme, styles.cellIdIconFolder),
+                cellIdIconDocument: Utils_1.default.getStyle(this.props.theme, styles.cellIdIconDocument),
+                iconDeviceError: Utils_1.default.getStyle(this.props.theme, styles.iconDeviceError),
+                iconDeviceConnected: Utils_1.default.getStyle(this.props.theme, styles.iconDeviceConnected),
+                iconDeviceDisconnected: Utils_1.default.getStyle(this.props.theme, styles.iconDeviceDisconnected),
+                cellButtonsButtonWithCustoms: Utils_1.default.getStyle(this.props.theme, styles.cellButtonsButtonWithCustoms),
+                invertedBackground: Utils_1.default.getStyle(this.props.theme, styles.invertedBackground),
+                invertedBackgroundFlex: Utils_1.default.getStyle(this.props.theme, styles.invertedBackgroundFlex),
+                contextMenuEdit: Utils_1.default.getStyle(this.props.theme, styles.contextMenuEdit),
+                contextMenuEditValue: Utils_1.default.getStyle(this.props.theme, styles.contextMenuEditValue),
+                contextMenuView: Utils_1.default.getStyle(this.props.theme, styles.contextMenuView),
+                contextMenuCustom: Utils_1.default.getStyle(this.props.theme, styles.contextMenuCustom),
+                contextMenuACL: Utils_1.default.getStyle(this.props.theme, styles.contextMenuACL),
+                contextMenuRoom: Utils_1.default.getStyle(this.props.theme, styles.contextMenuRoom),
+                contextMenuRole: Utils_1.default.getStyle(this.props.theme, styles.contextMenuRole),
+                contextMenuDelete: Utils_1.default.getStyle(this.props.theme, styles.contextMenuDelete),
+                filterInput: Utils_1.default.getStyle(this.props.theme, styles.headerCellInput, styles.filterInput),
+                iconCopy: Utils_1.default.getStyle(this.props.theme, styles.cellButtonsValueButton, styles.cellButtonsValueButtonCopy),
+                aliasReadWrite: Utils_1.default.getStyle(this.props.theme, styles.cellIdAlias, styles.cellIdAliasReadWrite),
+                aliasAlone: Utils_1.default.getStyle(this.props.theme, styles.cellIdAlias, styles.cellIdAliasAlone),
             };
             this.styleTheme = this.props.themeType;
         }

package/Components/Schedule.d.ts

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { IobTheme } from '../types';
 interface ScheduleConfig {
     time: {
         exactTime: boolean;
@@ -26,6 +27,7 @@ interface ScheduleConfig {
 interface ScheduleProps {
     schedule: string | ScheduleConfig;
     onChange: (schedule: string, desc?: string) => void;
+    theme: IobTheme;
 }
 interface ScheduleState {
     schedule: ScheduleConfig;

package/Components/Schedule.js

@@ -705,7 +705,7 @@ class Schedule extends react_1.Component {
                             }, 1500, e.target.value);
                         }, InputLabelProps: { shrink: true }, label: i18n_1.default.t('sch_at'), margin: "normal" }))),
             // ----- days ---
-            react_1.default.createElement(material_1.Box, { component: "div", key: "days", sx: Utils_1.default.getStyle(styles.rowDiv, styles.rowDays) },
+            react_1.default.createElement(material_1.Box, { component: "div", key: "days", sx: Utils_1.default.getStyle(this.props.theme, styles.rowDiv, styles.rowDays) },
                 react_1.default.createElement("div", { style: styles.modeDiv },
                     react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { style: styles.inputRadio, checked: !!schedule.period.days, onClick: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
@@ -741,7 +741,7 @@ class Schedule extends react_1.Component {
                 </div>,
             */
             // ----- weeks ---
-            react_1.default.createElement(material_1.Box, { component: "div", key: "weeks", sx: Utils_1.default.getStyle(styles.rowDiv, styles.rowDows) },
+            react_1.default.createElement(material_1.Box, { component: "div", key: "weeks", sx: Utils_1.default.getStyle(this.props.theme, styles.rowDiv, styles.rowDows) },
                 react_1.default.createElement("div", { style: styles.modeDiv },
                     react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { style: styles.inputRadio, checked: !!schedule.period.weeks, onClick: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
@@ -758,9 +758,9 @@ class Schedule extends react_1.Component {
                             } }), label: i18n_1.default.t('sch_periodWeekly') })),
                 react_1.default.createElement(material_1.Box, { component: "div", style: styles.settingsDiv },
                     react_1.default.createElement("div", { style: styles.settingsDiv }, this.getPeriodSettingsWeekly()),
-                    react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(styles.settingsDiv, styles.rowDowsDows) }, this.state.schedule.period.weeks ? this.getPeriodSettingsWeekdays() : null))),
+                    react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles.settingsDiv, styles.rowDowsDows) }, this.state.schedule.period.weeks ? this.getPeriodSettingsWeekdays() : null))),
             // ----- months ---
-            react_1.default.createElement(material_1.Box, { component: "div", key: "months", sx: Utils_1.default.getStyle(styles.rowDiv, styles.rowMonths) },
+            react_1.default.createElement(material_1.Box, { component: "div", key: "months", sx: Utils_1.default.getStyle(this.props.theme, styles.rowDiv, styles.rowMonths) },
                 react_1.default.createElement("div", { style: styles.modeDiv },
                     react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { style: styles.inputRadio, checked: !!schedule.period.months, onClick: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
@@ -778,7 +778,7 @@ class Schedule extends react_1.Component {
                 react_1.default.createElement("div", { style: styles.settingsDiv },
                     this.getPeriodSettingsMonthly(),
                     schedule.period.months ? react_1.default.createElement(material_1.Box, null,
-                        react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(styles.settingsDiv, styles.rowMonthsDates) },
+                        react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles.settingsDiv, styles.rowMonthsDates) },
                             react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { style: styles.inputRadio, checked: !!schedule.period.dates, onClick: () => {
                                         const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
                                         _schedule.period.months = _schedule.period.months || 1;
@@ -796,9 +796,9 @@ class Schedule extends react_1.Component {
                                         _schedule.period.once = '';
                                         this.onChange(_schedule);
                                     } }), label: i18n_1.default.t('sch_periodDates') })),
-                        react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(styles.settingsDiv, styles.rowMonthsDates) }, this.getPeriodSettingsDates())) : null)),
+                        react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles.settingsDiv, styles.rowMonthsDates) }, this.getPeriodSettingsDates())) : null)),
             // ----- years ---
-            react_1.default.createElement(material_1.Box, { component: "div", key: "years", sx: Utils_1.default.getStyle(styles.rowDiv, styles.rowYears) },
+            react_1.default.createElement(material_1.Box, { component: "div", key: "years", sx: Utils_1.default.getStyle(this.props.theme, styles.rowDiv, styles.rowYears) },
                 react_1.default.createElement("div", { style: styles.modeDiv },
                     react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { style: styles.inputRadio, checked: !!schedule.period.years, onClick: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));

package/Components/TreeTable.d.ts

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import type Connection from '../Connection';
+import { IobTheme } from '../types';
 interface Column {
     cellStyle?: Record<string, any>;
     editComponent?: React.FC<{
@@ -36,6 +37,7 @@ interface TreeTableProps {
     /** Shift in pixels for every level */
     levelShift?: number;
     adapterName: string;
+    theme: IobTheme;
 }
 interface TreeTableState {
     opened: string[];

package/Components/TreeTable.js

@@ -434,19 +434,19 @@ class TreeTable extends react_1.Component {
     renderHead() {
         return react_1.default.createElement(material_1.TableHead, null,
             react_1.default.createElement(material_1.TableRow, { key: "headerRow" },
-                react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles.cellExpand) }),
-                react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles[`width_${this.props.columns[0].field.replace(/\./g, '_')}`]), style: this.props.columns[0].headerStyle || this.props.columns[0].cellStyle, sortDirection: this.props.noSort ? false : (this.state.orderBy === this.props.columns[0].field ? this.state.order : false) }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === this.props.columns[0].field, direction: this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(this.props.columns[0].field) },
+                react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellExpand) }),
+                react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${this.props.columns[0].field.replace(/\./g, '_')}`]), style: this.props.columns[0].headerStyle || this.props.columns[0].cellStyle, sortDirection: this.props.noSort ? false : (this.state.orderBy === this.props.columns[0].field ? this.state.order : false) }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === this.props.columns[0].field, direction: this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(this.props.columns[0].field) },
                     this.props.columns[0].title || this.props.columns[0].field,
                     this.state.orderBy === this.props.columns[0].field ?
                         react_1.default.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)),
-                this.props.columns.map((col, i) => (!i && !col.hidden ? null : react_1.default.createElement(material_1.TableCell, { key: col.field, sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles[`width_${col.field.replace(/\./g, '_')}`]), style: col.headerStyle || col.cellStyle, component: "th" }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === col.field, direction: this.state.orderBy === col.field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(col.field) },
+                this.props.columns.map((col, i) => (!i && !col.hidden ? null : react_1.default.createElement(material_1.TableCell, { key: col.field, sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${col.field.replace(/\./g, '_')}`]), style: col.headerStyle || col.cellStyle, component: "th" }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === col.field, direction: this.state.orderBy === col.field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(col.field) },
                     col.title || col.field,
                     this.state.orderBy === col.field ?
                         react_1.default.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)))),
-                this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles.cellButton) }, !this.props.noAdd ? react_1.default.createElement(material_1.Fab, { color: "primary", size: "small", disabled: this.state.editMode !== false, onClick: () => this.props.onUpdate && this.props.onUpdate(true) },
+                this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) }, !this.props.noAdd ? react_1.default.createElement(material_1.Fab, { color: "primary", size: "small", disabled: this.state.editMode !== false, onClick: () => this.props.onUpdate && this.props.onUpdate(true) },
                     react_1.default.createElement(icons_material_1.Add, null)) : null) : null,
                 this.props.onDelete || this.props.onUpdate ?
-                    react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles.cellButton) }) : null));
+                    react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) }) : null));
     }
     render() {
         const col = this.props.columns.find(_col => _col.field === this.state.orderBy);

package/Dialogs/Cron.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IobTheme } from '../types';
 interface DialogCronProps {
     onClose: () => void;
     onOk: (cron: string) => void;
@@ -12,6 +13,7 @@ interface DialogCronProps {
     complex?: boolean;
     /** do not show wizard */
     noWizard?: boolean;
+    theme: IobTheme;
 }
 interface DialogCronState {
     cron: string;

package/Dialogs/Cron.js

@@ -86,7 +86,7 @@ class DialogCron extends react_1.default.Component {
                         react_1.default.createElement(material_1.Radio, { key: "complex", checked: this.state.mode === 'complex', onChange: () => this.setMode('complex') }),
                         react_1.default.createElement("label", { onClick: () => this.setMode('complex'), style: this.state.mode !== 'complex' ? { color: 'lightgrey' } : {} }, i18n_1.default.t('sc_cron')))) : null,
                 this.state.mode === 'simple' && react_1.default.createElement(SimpleCron_1.default, { cronExpression: this.state.cron, onChange: cron => this.setState({ cron }), language: i18n_1.default.getLanguage() }),
-                this.state.mode === 'wizard' && react_1.default.createElement(Schedule_1.default, { schedule: this.state.cron, onChange: (cron) => this.setState({ cron }) }),
+                this.state.mode === 'wizard' && react_1.default.createElement(Schedule_1.default, { theme: this.props.theme, schedule: this.state.cron, onChange: (cron) => this.setState({ cron }) }),
                 this.state.mode === 'complex' && react_1.default.createElement(ComplexCron_1.default, { cronExpression: this.state.cron, onChange: cron => this.setState({ cron }), language: i18n_1.default.getLanguage() })),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.handleOk(), color: "primary", startIcon: react_1.default.createElement(icons_material_1.Check, null) }, this.props.ok || i18n_1.default.t('ra_Ok')),

package/README.md

@@ -690,7 +690,8 @@ class JsonComponent extends ConfigGeneric {
 The main change is that the `withStyles` was removed. So you have to replace all `withStyles` with `sx` or `style` properties.
 
 You can read more about sx [here](https://mui.com/system/getting-started/the-sx-prop/).
-
+- Remove at start of the file `import { withStyles } from '@mui/styles';`
+- Replace at the very end of the file `export default withStyles(styles)(MyComponent);` with `export default MyComponent;`
 - Modify `const styles`:
 Before:
 ```
@@ -733,11 +734,11 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
 - Modify `classes`:
   Before: `<Dialog classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}>`
 
-  After: `<Dialog {{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
+  After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
 
   Before: `<Dialog classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}>`
 
-  After: `<Dialog {{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
+  After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
 
   Before: `<ListItem classes={{ root: styles.listItem }} >`
   
@@ -764,7 +765,7 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
 -->
 
 ## Changelog
-### 6.0.0 (2024-06-19)
+### 6.0.1 (2024-06-19)
 * (bluefox) Removed the usage of `withStyles` in favor of `sx` and `style` properties (see [Migration from v5 to v6](#migration-from-v5-to-v6)
 * (bluefox) (BREAKING) Higher version of `@mui/material` (5.15.20) is used
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",