diff --git a/src/components/breadcrumbs/root-network-select.tsx b/src/components/breadcrumbs/root-network-select.tsx
index d5afcfc5c3..390296d8dc 100644
--- a/src/components/breadcrumbs/root-network-select.tsx
+++ b/src/components/breadcrumbs/root-network-select.tsx
@@ -5,15 +5,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Box, ListItemText, MenuItem, Select, Theme } from '@mui/material';
+import { Box, ListItemText, MenuItem, Select } from '@mui/material';
 import { UUID } from 'crypto';
 import { RemoveRedEye, VisibilityOff } from '@mui/icons-material';
 import { RootNetworkMetadata } from '../graph/menus/network-modifications/network-modification-menu.type';
 import { useSyncNavigationActions } from 'hooks/use-sync-navigation-actions';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    selectRoot: (theme: Theme) => ({
+    selectRoot: (theme) => ({
         height: theme.spacing(4),
         width: theme.spacing(15),
         paddingTop: theme.spacing(1),
@@ -22,7 +22,7 @@ const styles = {
     selectInput: { display: 'flex', gap: 1, alignItems: 'center' },
     selectItem: { gap: 1 },
     hiddenItem: { display: 'none' },
-};
+} as const satisfies MuiStyles;
 
 interface RootNetworkSelectProps {
     currentRootNetworkUuid: UUID | null;
diff --git a/src/components/breadcrumbs/study-path-breadcrumbs.tsx b/src/components/breadcrumbs/study-path-breadcrumbs.tsx
index 434ff6fdf9..af98165b11 100644
--- a/src/components/breadcrumbs/study-path-breadcrumbs.tsx
+++ b/src/components/breadcrumbs/study-path-breadcrumbs.tsx
@@ -7,6 +7,7 @@
 
 import { MoreHoriz } from '@mui/icons-material';
 import { Box, Breadcrumbs as MuiBreadcrumbs, Tooltip } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CurrentTreeNode } from '../graph/tree-node.type';
 import { useSelector } from 'react-redux';
 import { AppState } from '../../redux/reducer';
@@ -21,7 +22,7 @@ const styles = {
         alignItems: 'center',
         flexWrap: 'nowrap',
     },
-};
+} as const satisfies MuiStyles;
 
 export interface StudyPathBreadcrumbsProps {
     studyName: string | undefined;
diff --git a/src/components/custom-aggrid/cell-renderers.tsx b/src/components/custom-aggrid/cell-renderers.tsx
index 464762cd57..8877c66315 100644
--- a/src/components/custom-aggrid/cell-renderers.tsx
+++ b/src/components/custom-aggrid/cell-renderers.tsx
@@ -6,16 +6,14 @@
  */
 
 import { Box, Checkbox, Tooltip } from '@mui/material';
-import { Theme } from '@mui/material/styles';
 import { ReactNode, useEffect, useRef, useState } from 'react';
-
 import { isBlankOrEmpty } from 'components/utils/validation-functions';
 import { ICellRendererParams } from 'ag-grid-community';
 import { CustomCellRendererProps } from 'ag-grid-react';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    tableCell: (theme: Theme) => ({
+    tableCell: (theme) => ({
         fontSize: 'small',
         cursor: 'inherit',
         display: 'flex',
@@ -35,7 +33,7 @@ const styles = {
     numericValue: {
         marginLeft: 'inherit',
     },
-};
+} as const satisfies MuiStyles;
 
 export const BooleanCellRenderer = (props: any) => {
     const isChecked = props.value;
diff --git a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-boolean-filter.tsx b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-boolean-filter.tsx
index f9fa0a2603..be71993b5c 100644
--- a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-boolean-filter.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-boolean-filter.tsx
@@ -12,7 +12,7 @@ import { useIntl } from 'react-intl';
 import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
 import { useCustomAggridFilter } from './hooks/use-custom-aggrid-filter';
 import { isNonEmptyStringOrArray } from '../../../utils/types-utils';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import { BooleanFilterValue } from './utils/aggrid-filters-utils';
 import { CustomAggridFilterParams, FILTER_DATA_TYPES, FILTER_TEXT_COMPARATORS } from './custom-aggrid-filter.type';
 
@@ -22,7 +22,7 @@ const styles = {
         maxWidth: '40%',
         paddingRight: '0px',
     },
-};
+} as const satisfies MuiStyles;
 
 export const CustomAggridBooleanFilter: FunctionComponent<CustomAggridFilterParams> = ({
     api,
diff --git a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-selector.tsx b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-selector.tsx
index 0e5acc896a..30620a1f72 100644
--- a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-selector.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-selector.tsx
@@ -5,16 +5,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React from 'react';
-import { Select, MenuItem } from '@mui/material';
-import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
+import { MenuItem, Select, type SelectChangeEvent } from '@mui/material';
 import { useIntl } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     input: {
         minWidth: '250px',
         maxWidth: '40%',
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomAggridComparatorSelectorProps {
     value: string;
diff --git a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-duration-filter.tsx b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-duration-filter.tsx
index 694ffff57f..67da3d7072 100644
--- a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-duration-filter.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-duration-filter.tsx
@@ -8,6 +8,7 @@ import { ChangeEvent, FunctionComponent, useCallback, useEffect, useState } from
 import { Grid, IconButton, InputAdornment, TextField, Typography } from '@mui/material';
 import { useIntl } from 'react-intl';
 import ClearIcon from '@mui/icons-material/Clear';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CustomAggridComparatorSelector } from './custom-aggrid-comparator-selector';
 import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
 import { useCustomAggridFilter } from './hooks/use-custom-aggrid-filter';
@@ -33,7 +34,7 @@ const styles = {
             MozAppearance: 'textfield',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 const CustomAggridDurationFilter: FunctionComponent<CustomAggridFilterParams> = ({ api, colId, filterParams }) => {
     const intl = useIntl();
diff --git a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-filter.tsx b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-filter.tsx
index 8db7025314..655a4176d1 100644
--- a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-filter.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-filter.tsx
@@ -6,6 +6,7 @@
  */
 import React, { ComponentType, MouseEvent, useMemo, useState } from 'react';
 import { Popover } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CustomFilterIcon } from './custom-filter-icon';
 import { useCustomAggridFilter } from './hooks/use-custom-aggrid-filter';
 import { CustomAggridAutocompleteFilterParams } from './custom-aggrid-autocomplete-filter';
@@ -19,7 +20,7 @@ const styles = {
     autoCompleteInput: {
         width: '30%',
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomAggridFilterWrapperParams<F extends CustomAggridFilterParams> {
     filterComponent: ComponentType<F>;
diff --git a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx
index 8639646e46..7affa80fb9 100644
--- a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx
@@ -5,11 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React, { useMemo } from 'react';
-import { TextField, Grid, InputAdornment, IconButton } from '@mui/material';
+import { Grid, IconButton, InputAdornment, TextField } from '@mui/material';
 import ClearIcon from '@mui/icons-material/Clear';
 import { DisplayRounding } from '../display-rounding';
 import { useIntl } from 'react-intl';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import { FILTER_DATA_TYPES } from './custom-aggrid-filter.type';
 
 const styles = {
@@ -25,7 +25,7 @@ const styles = {
             MozAppearance: 'textfield',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomAggridTextFilterProps {
     value: unknown;
diff --git a/src/components/custom-aggrid/custom-aggrid-filters/custom-filter-icon.tsx b/src/components/custom-aggrid/custom-aggrid-filters/custom-filter-icon.tsx
index d5abd42017..e4e89031dc 100644
--- a/src/components/custom-aggrid/custom-aggrid-filters/custom-filter-icon.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-filters/custom-filter-icon.tsx
@@ -7,13 +7,13 @@
 import React, { MouseEventHandler } from 'react';
 import { Badge, Grid, IconButton } from '@mui/material';
 import { FilterAlt } from '@mui/icons-material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { isNonEmptyStringOrArray } from '../../../utils/types-utils';
 
 const styles = {
-    iconSize: {
-        fontSize: '1rem',
-    },
-};
+    iconSize: { fontSize: '1rem' },
+    gridRoot: { overflow: 'visible' },
+} as const satisfies MuiStyles;
 
 interface CustomFilterIconProps {
     handleShowFilter: MouseEventHandler<HTMLButtonElement> | undefined;
@@ -21,12 +21,7 @@ interface CustomFilterIconProps {
 }
 
 export const CustomFilterIcon = ({ handleShowFilter, selectedFilterData }: CustomFilterIconProps) => (
-    <Grid
-        item
-        sx={{
-            overflow: 'visible',
-        }}
-    >
+    <Grid item sx={styles.gridRoot}>
         <Grid item>
             <IconButton size={'small'} onClick={handleShowFilter}>
                 <Badge
diff --git a/src/components/custom-aggrid/custom-aggrid-header.tsx b/src/components/custom-aggrid/custom-aggrid-header.tsx
index 8294c33d4b..60e81427b5 100644
--- a/src/components/custom-aggrid/custom-aggrid-header.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-header.tsx
@@ -7,6 +7,7 @@
 
 import React, { ComponentType, useCallback, useState } from 'react';
 import { Grid } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CustomAggridFilter } from './custom-aggrid-filters/custom-aggrid-filter';
 import { CustomAggridSort } from './custom-aggrid-sort';
 import { SortParams, useCustomAggridSort } from './hooks/use-custom-aggrid-sort';
@@ -19,7 +20,7 @@ const styles = {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomHeaderComponentProps<F extends CustomAggridFilterParams, T> extends CustomHeaderProps {
     displayName: string;
diff --git a/src/components/custom-aggrid/custom-aggrid-menu.tsx b/src/components/custom-aggrid/custom-aggrid-menu.tsx
index a95d16f63a..8ec9f298a4 100644
--- a/src/components/custom-aggrid/custom-aggrid-menu.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-menu.tsx
@@ -7,12 +7,13 @@
 import React, { useRef, useState } from 'react';
 import { Badge, Grid, IconButton } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     iconSize: {
         fontSize: '1rem',
     },
-};
+} as const satisfies MuiStyles;
 
 export interface CustomMenuProps<T> {
     Menu: React.FC<T | DialogMenuProps>;
diff --git a/src/components/custom-aggrid/custom-aggrid-sort.tsx b/src/components/custom-aggrid/custom-aggrid-sort.tsx
index 957a57c5a9..f5885b681b 100644
--- a/src/components/custom-aggrid/custom-aggrid-sort.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-sort.tsx
@@ -8,6 +8,7 @@ import { IconButton } from '@mui/material';
 import { SortParams } from './hooks/use-custom-aggrid-sort';
 import { ArrowDownward, ArrowUpward } from '@mui/icons-material';
 import React from 'react';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { useCustomAggridSort } from './hooks/use-custom-aggrid-sort';
 import { SortWay } from '../../types/custom-aggrid-types';
 
@@ -15,7 +16,7 @@ const styles = {
     iconSize: {
         fontSize: '1rem',
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomAggridSortProps {
     colId: string;
diff --git a/src/components/custom-aggrid/display-rounding.tsx b/src/components/custom-aggrid/display-rounding.tsx
index 48cd81ab74..37b9c2dd3f 100644
--- a/src/components/custom-aggrid/display-rounding.tsx
+++ b/src/components/custom-aggrid/display-rounding.tsx
@@ -7,6 +7,7 @@
 import { useIntl } from 'react-intl';
 import { Box, FormHelperText } from '@mui/material';
 import React from 'react';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     exponent: {
@@ -14,7 +15,7 @@ const styles = {
         bottom: '1ex',
         fontSize: '80%',
     },
-};
+} as const satisfies MuiStyles;
 
 /**
  * displays a rounding precision like this : 'Rounded to 10^decimalAfterDot' or as a decimal number if decimalAfterDot <= 4
diff --git a/src/components/custom-aggrid/rowindex-cell-renderer.tsx b/src/components/custom-aggrid/rowindex-cell-renderer.tsx
index 6a55325ffa..21fac43179 100644
--- a/src/components/custom-aggrid/rowindex-cell-renderer.tsx
+++ b/src/components/custom-aggrid/rowindex-cell-renderer.tsx
@@ -13,6 +13,7 @@ import { setCalculationSelections } from '../../redux/actions';
 import { AppState } from '../../redux/reducer';
 import { CustomCellRendererProps } from 'ag-grid-react';
 import { useIntl } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CalculationRowType, CalculationType } from '../spreadsheet-view/types/calculation.type';
 import { isCalculationRow } from '../spreadsheet-view/utils/calculation-utils';
 
@@ -29,7 +30,7 @@ const styles = {
         minWidth: 'auto',
         minHeight: 'auto',
     },
-};
+} as const satisfies MuiStyles;
 
 export const RowIndexCellRenderer = (props: CustomCellRendererProps) => {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
diff --git a/src/components/dialogs/commons/grid-section.tsx b/src/components/dialogs/commons/grid-section.tsx
index 2f0d96b8af..fc1884f352 100644
--- a/src/components/dialogs/commons/grid-section.tsx
+++ b/src/components/dialogs/commons/grid-section.tsx
@@ -4,16 +4,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Box, Grid, SxProps, Theme, Tooltip } from '@mui/material';
+import { Box, Grid, Tooltip } from '@mui/material';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { InfoOutlined } from '@mui/icons-material';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type SxStyle } from '@gridsuite/commons-ui';
 
 export interface GridSectionProps {
     title: string;
     heading?: 1 | 2 | 3 | 4 | 5 | 6;
     size?: number;
-    customStyle?: SxProps<Theme>;
+    customStyle?: SxStyle;
     tooltipEnabled?: boolean;
     tooltipMessage?: string;
     isLiteralText?: boolean;
diff --git a/src/components/dialogs/dialog-utils.ts b/src/components/dialogs/dialog-utils.ts
index fa255464b7..c8d6d55554 100644
--- a/src/components/dialogs/dialog-utils.ts
+++ b/src/components/dialogs/dialog-utils.ts
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { FilledTextFieldProps, StandardTextFieldProps, Theme } from '@mui/material';
+import { FilledTextFieldProps, StandardTextFieldProps } from '@mui/material';
 import {
     AMPERE,
     KILO_AMPERE,
@@ -15,6 +15,7 @@ import {
     MEGA_VOLT_AMPERE,
     MEGA_WATT,
     MICRO_SIEMENS,
+    type MuiStyles,
     OHM,
     PERCENTAGE,
     SIEMENS,
@@ -29,12 +30,12 @@ export const styles = {
         fontSize: 18,
         maxWidth: 'none',
     },
-    button: (theme: Theme) => ({
+    button: (theme) => ({
         justifyContent: 'flex-start',
         fontSize: 'small',
         marginTop: theme.spacing(1),
     }),
-    paddingButton: (theme: Theme) => ({
+    paddingButton: (theme) => ({
         paddingLeft: theme.spacing(2),
     }),
     formDirectoryElements1: {
@@ -47,7 +48,7 @@ export const styles = {
         borderRadius: '4px',
         overflow: 'hidden',
     },
-    formDirectoryElementsError: (theme: Theme) => ({
+    formDirectoryElementsError: (theme) => ({
         borderColor: theme.palette.error.main,
     }),
     formDirectoryElements2: {
@@ -65,7 +66,7 @@ export const styles = {
     addDirectoryElements: {
         marginTop: '-5px',
     },
-};
+} as const satisfies MuiStyles;
 
 export const MicroSusceptanceAdornment = {
     position: 'end',
diff --git a/src/components/dialogs/equipment-id/equipment-id-selector.tsx b/src/components/dialogs/equipment-id/equipment-id-selector.tsx
index c0f59cf821..a025360041 100644
--- a/src/components/dialogs/equipment-id/equipment-id-selector.tsx
+++ b/src/components/dialogs/equipment-id/equipment-id-selector.tsx
@@ -9,16 +9,16 @@ import { useEffect, useState } from 'react';
 import { filledTextField } from '../dialog-utils';
 import { UUID } from 'crypto';
 import { Autocomplete, Box, CircularProgress, Grid, TextField } from '@mui/material';
-import { Theme } from '@mui/material/styles';
-import { EquipmentType, ExtendedEquipmentType, FieldLabel } from '@gridsuite/commons-ui';
+import { type EquipmentType, type ExtendedEquipmentType, FieldLabel, type MuiStyles } from '@gridsuite/commons-ui';
 import { FormFiller } from './formFiller.js';
 import { FormattedMessage } from 'react-intl';
 import { fetchEquipmentsIds } from '../../../services/study/network-map';
 import GridItem from '../commons/grid-item';
 import { useSelector } from 'react-redux';
 import { AppState } from '../../../redux/reducer';
+
 const styles = {
-    message: (theme: Theme) => ({
+    message: (theme) => ({
         fontSize: 'small',
         fontStyle: 'italic',
         color: theme.palette.text.secondary,
@@ -27,7 +27,7 @@ const styles = {
         color: 'rgba(0,0,0,0)',
         width: 0,
     },
-};
+} as const satisfies MuiStyles;
 
 interface EquipmentIdSelectorProps {
     defaultValue: string | null;
diff --git a/src/components/dialogs/equipment-id/formFiller.tsx b/src/components/dialogs/equipment-id/formFiller.tsx
index db271dab1e..70e9a6cbd9 100644
--- a/src/components/dialogs/equipment-id/formFiller.tsx
+++ b/src/components/dialogs/equipment-id/formFiller.tsx
@@ -5,19 +5,19 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import { Box, Grid } from '@mui/material';
-import { Theme, useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import { ReactNode } from 'react';
 
 const styles = {
-    filler: (theme: Theme) => ({
+    filler: (theme) => ({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: theme.formFiller.background,
     }),
-};
+} as const satisfies MuiStyles;
 
 interface FormFillerProps {
     size?: number;
diff --git a/src/components/dialogs/illustrations/AccordionIllustration.tsx b/src/components/dialogs/illustrations/AccordionIllustration.tsx
index 26419c4403..64c76cc191 100644
--- a/src/components/dialogs/illustrations/AccordionIllustration.tsx
+++ b/src/components/dialogs/illustrations/AccordionIllustration.tsx
@@ -7,8 +7,9 @@
 
 import { FunctionComponent, PropsWithChildren, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Accordion, AccordionDetails, AccordionSummary, Box, Theme, Typography } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material';
 import { ExpandCircleDown, ExpandMore } from '@mui/icons-material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 type AccordionIllustrationProps = {
     state: boolean;
@@ -21,7 +22,7 @@ const styles = {
     accordion: {
         background: 'none',
     },
-    accordionIllustrationSummary: (theme: Theme) => ({
+    accordionIllustrationSummary: (theme) => ({
         flexDirection: 'row',
         flexGrow: 0,
         justifyContent: 'left',
@@ -38,10 +39,10 @@ const styles = {
             flexGrow: 0,
         },
     }),
-    accordionIllustrationDetails: (theme: Theme) => ({
+    accordionIllustrationDetails: (theme) => ({
         padding: theme.spacing(0),
     }),
-};
+} as const satisfies MuiStyles;
 
 export const AccordionIllustration: FunctionComponent<PropsWithChildren<AccordionIllustrationProps>> = (props) => {
     const [mouseHover, setMouseHover] = useState(false);
diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx
index bf8eb0d10e..7d59ae4d8c 100644
--- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx
+++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx
@@ -30,7 +30,7 @@ import { isBlankOrEmpty } from '../../utils/validation-functions';
 import { FormattedMessage } from 'react-intl';
 import { tabStyles } from 'components/utils/tab-utils';
 import { APPLICABILITY } from '../../network/constants';
-import { NAME } from '@gridsuite/commons-ui';
+import { type MuiStyles, NAME } from '@gridsuite/commons-ui';
 import { grey } from '@mui/material/colors';
 
 const limitsStyles = {
@@ -51,7 +51,7 @@ const limitsStyles = {
         height: 'auto',
         padding: '1',
     },
-};
+} as const satisfies MuiStyles;
 
 export interface OperationalLimitsGroupsTabsProps {
     parentFormName: string;
diff --git a/src/components/dialogs/limits/temporary-limits-table.tsx b/src/components/dialogs/limits/temporary-limits-table.tsx
index 3c37805658..ae7506849f 100644
--- a/src/components/dialogs/limits/temporary-limits-table.tsx
+++ b/src/components/dialogs/limits/temporary-limits-table.tsx
@@ -9,11 +9,12 @@ import { useState } from 'react';
 import { useFieldArray } from 'react-hook-form';
 import { Box, Grid, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import {
-    ColumnNumeric,
-    ColumnText,
+    type ColumnNumeric,
+    type ColumnText,
     DndColumnType,
     ErrorInput,
     FieldErrorAlert,
+    type MuiStyles,
     TableNumericalInput,
     TableTextInput,
 } from '@gridsuite/commons-ui';
@@ -31,7 +32,7 @@ const styles = {
         margin: 1,
         textTransform: 'none',
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomTableCellProps {
     name: string;
diff --git a/src/components/dialogs/line-types-catalog/line-type-segment-form.tsx b/src/components/dialogs/line-types-catalog/line-type-segment-form.tsx
index e75f3de8b6..618bdf12db 100644
--- a/src/components/dialogs/line-types-catalog/line-type-segment-form.tsx
+++ b/src/components/dialogs/line-types-catalog/line-type-segment-form.tsx
@@ -29,7 +29,7 @@ import LineTypesCatalogSelectorDialog from './line-types-catalog-selector-dialog
 import { roundToDefaultPrecision } from '../../../utils/rounding';
 import LineTypeSegmentCreation from './line-type-segment-creation';
 import { calculateReactance, calculateResistance, calculateSusceptance } from '../../utils/utils';
-import { CustomAGGrid, useSnackMessage } from '@gridsuite/commons-ui';
+import { CustomAGGrid, type MuiStyles, useSnackMessage } from '@gridsuite/commons-ui';
 import { getLineTypesCatalog } from '../../../services/network-modification';
 import GridItem from '../commons/grid-item';
 import { CurrentLimitsInfo, LineTypeInfo } from './line-catalog.type';
@@ -51,7 +51,7 @@ const styles = {
         display: 'flex',
         justifyContent: 'end',
     },
-};
+} as const satisfies MuiStyles;
 
 export const LineTypeSegmentForm = () => {
     const { setValue, getValues, clearErrors } = useFormContext();
diff --git a/src/components/dialogs/network-modifications/balances-adjustment/styles.ts b/src/components/dialogs/network-modifications/balances-adjustment/styles.ts
index b9d46abfd5..0cb82fecc3 100644
--- a/src/components/dialogs/network-modifications/balances-adjustment/styles.ts
+++ b/src/components/dialogs/network-modifications/balances-adjustment/styles.ts
@@ -4,10 +4,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Theme } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 export const styles = {
-    autocomplete: (theme: Theme) => ({
+    autocomplete: (theme) => ({
         '.MuiAutocomplete-inputRoot': {
             display: 'flex',
             alignItems: 'flex-start',
@@ -25,4 +25,4 @@ export const styles = {
             flexWrap: 'wrap',
         },
     }),
-};
+} as const satisfies MuiStyles;
diff --git a/src/components/dialogs/network-modifications/common/measurements/branch-active-reactive-power-form.tsx b/src/components/dialogs/network-modifications/common/measurements/branch-active-reactive-power-form.tsx
index c1f23d79fa..305737802f 100644
--- a/src/components/dialogs/network-modifications/common/measurements/branch-active-reactive-power-form.tsx
+++ b/src/components/dialogs/network-modifications/common/measurements/branch-active-reactive-power-form.tsx
@@ -9,13 +9,14 @@ import { FunctionComponent } from 'react';
 import GridSection from '../../../commons/grid-section';
 import { BranchActiveReactivePowerMeasurementsFormProps } from './measurement.type';
 import { PowerMeasurementsForm } from './power-measurements-form';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     h3: {
         marginTop: 0,
         marginBottom: 0,
     },
-};
+} as const satisfies MuiStyles;
 
 const BranchActiveReactivePowerMeasurementsForm: FunctionComponent<BranchActiveReactivePowerMeasurementsFormProps> = ({
     equipmentToModify,
diff --git a/src/components/dialogs/network-modifications/generation-dispatch/substations-autocomplete.tsx b/src/components/dialogs/network-modifications/generation-dispatch/substations-autocomplete.tsx
index c4f7035043..b98bb46b34 100644
--- a/src/components/dialogs/network-modifications/generation-dispatch/substations-autocomplete.tsx
+++ b/src/components/dialogs/network-modifications/generation-dispatch/substations-autocomplete.tsx
@@ -4,14 +4,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { AutocompleteInputProps, genHelperError } from '@gridsuite/commons-ui';
-
+import { type AutocompleteInputProps, genHelperError, type MuiStyles } from '@gridsuite/commons-ui';
 import { useController } from 'react-hook-form';
 import { SyntheticEvent } from 'react';
-import { Autocomplete, AutocompleteProps, TextField, TextFieldProps, Theme } from '@mui/material';
+import { Autocomplete, type AutocompleteProps, TextField, type TextFieldProps } from '@mui/material';
 
 const styles = {
-    autocomplete: (theme: Theme) => ({
+    autocomplete: (theme) => ({
         '.MuiAutocomplete-inputRoot': {
             display: 'flex',
             alignItems: 'flex-start',
@@ -26,7 +25,7 @@ const styles = {
             flexWrap: 'wrap',
         },
     }),
-};
+} as const satisfies MuiStyles;
 
 type SubstationsAutocompleteProps = Pick<AutocompleteProps<string, true, false, false>, 'disabled'> & {
     name: AutocompleteInputProps['name'];
diff --git a/src/components/dialogs/network-modifications/limit-sets/limit-sets-tabular-modification-form.tsx b/src/components/dialogs/network-modifications/limit-sets/limit-sets-tabular-modification-form.tsx
index d8fb41b6e6..d67aa4ba4e 100644
--- a/src/components/dialogs/network-modifications/limit-sets/limit-sets-tabular-modification-form.tsx
+++ b/src/components/dialogs/network-modifications/limit-sets/limit-sets-tabular-modification-form.tsx
@@ -15,6 +15,7 @@ import {
     FieldErrorAlert,
     IntegerInput,
     LANG_FRENCH,
+    type MuiStyles,
 } from '@gridsuite/commons-ui';
 import {
     AMOUNT_TEMPORARY_LIMITS,
@@ -44,7 +45,7 @@ import { BOOLEAN } from '../../../network/constants';
 
 const styles = {
     grid: { height: 500, width: '100%' },
-};
+} as const satisfies MuiStyles;
 
 export interface TabularModificationFormProps {
     dataFetching: boolean;
diff --git a/src/components/dialogs/network-modifications/tabular/properties/define-properties-dialog.tsx b/src/components/dialogs/network-modifications/tabular/properties/define-properties-dialog.tsx
index 45b477913f..8151ecdd34 100644
--- a/src/components/dialogs/network-modifications/tabular/properties/define-properties-dialog.tsx
+++ b/src/components/dialogs/network-modifications/tabular/properties/define-properties-dialog.tsx
@@ -9,9 +9,10 @@ import { useEffect } from 'react';
 import { Grid } from '@mui/material';
 import {
     CustomFormProvider,
-    EquipmentType,
+    type EquipmentType,
     equipmentTypesForPredefinedPropertiesMapper,
-    UseStateBooleanReturn,
+    type MuiStyles,
+    type UseStateBooleanReturn,
 } from '@gridsuite/commons-ui';
 import { useForm } from 'react-hook-form';
 
@@ -35,7 +36,7 @@ const styles = {
         maxWidth: 'none',
         margin: 'auto',
     },
-};
+} as const satisfies MuiStyles;
 
 export type DefinePropertiesDialogProps = {
     open: UseStateBooleanReturn;
diff --git a/src/components/dialogs/network-modifications/tabular/tabular-form.tsx b/src/components/dialogs/network-modifications/tabular/tabular-form.tsx
index 36c21c9248..3ece800dd5 100644
--- a/src/components/dialogs/network-modifications/tabular/tabular-form.tsx
+++ b/src/components/dialogs/network-modifications/tabular/tabular-form.tsx
@@ -19,7 +19,8 @@ import {
     useStateBoolean,
     DirectoryItemSelector,
     ElementType,
-    TreeViewFinderNodeProps,
+    type TreeViewFinderNodeProps,
+    type MuiStyles,
 } from '@gridsuite/commons-ui';
 import {
     EQUIPMENT_ID,
@@ -58,7 +59,7 @@ import { useFilterCsvGenerator } from './use-filter-csv-generator';
 
 const dialogStyles = {
     grid: { height: 500, width: '100%' },
-};
+} as const satisfies MuiStyles;
 
 export interface TabularFormProps {
     dataFetching: boolean;
diff --git a/src/components/dialogs/network-modifications/voltage-init-modification/voltage-init-modification-dialog.tsx b/src/components/dialogs/network-modifications/voltage-init-modification/voltage-init-modification-dialog.tsx
index f69f7cdef3..32f65b11b9 100644
--- a/src/components/dialogs/network-modifications/voltage-init-modification/voltage-init-modification-dialog.tsx
+++ b/src/components/dialogs/network-modifications/voltage-init-modification/voltage-init-modification-dialog.tsx
@@ -24,7 +24,7 @@ import {
     V,
     VOLTAGE_SET_POINT,
 } from '../../../utils/field-constants';
-import { CustomAGGrid, CsvExport } from '@gridsuite/commons-ui';
+import { CustomAGGrid, CsvExport, type MuiStyles } from '@gridsuite/commons-ui';
 import { AgGridReact } from 'ag-grid-react';
 import { FetchStatus } from '../../../../services/utils.type';
 import type { ColDef, RowDataUpdatedEvent } from 'ag-grid-community';
@@ -46,7 +46,7 @@ const styles = {
     grid: {
         flexGrow: '1',
     },
-};
+} as const satisfies MuiStyles;
 
 const defaultColDef: ColDef = {
     filter: true,
diff --git a/src/components/dialogs/network-modifications/voltage-level-topology-modification/separator-cell-renderer.tsx b/src/components/dialogs/network-modifications/voltage-level-topology-modification/separator-cell-renderer.tsx
index 43e5b6092a..79aedcaabb 100644
--- a/src/components/dialogs/network-modifications/voltage-level-topology-modification/separator-cell-renderer.tsx
+++ b/src/components/dialogs/network-modifications/voltage-level-topology-modification/separator-cell-renderer.tsx
@@ -4,17 +4,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Theme, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import React from 'react';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    separator: (theme: Theme) => ({
+    separator: (theme) => ({
         fontWeight: 'bold',
         fontSize: '1rem',
         width: '100%',
         marginTop: theme.spacing(1),
     }),
-};
+} as const satisfies MuiStyles;
 
 type SeparatorCellRendererProps = {
     value: string;
diff --git a/src/components/dialogs/parameters/dynamicsimulation/curve-parameters.tsx b/src/components/dialogs/parameters/dynamicsimulation/curve-parameters.tsx
index 63cbf34b87..e3461417f3 100644
--- a/src/components/dialogs/parameters/dynamicsimulation/curve-parameters.tsx
+++ b/src/components/dialogs/parameters/dynamicsimulation/curve-parameters.tsx
@@ -12,7 +12,7 @@ import { useIntl } from 'react-intl';
 import CurveSelectorDialog from './curve/dialog/curve-selector-dialog';
 import { GlobalFilter } from './global-filter';
 import { useFieldArray, useFormContext } from 'react-hook-form';
-import { CustomAGGrid } from '@gridsuite/commons-ui';
+import { CustomAGGrid, type MuiStyles } from '@gridsuite/commons-ui';
 import { AgGridReact } from 'ag-grid-react';
 import { Curve as CurveType } from './curve/dialog/curve-preview';
 import { ValueFormatterParams } from 'ag-grid-community';
@@ -24,7 +24,7 @@ const styles = {
         width: 'auto',
         height: '100%',
     },
-};
+} as const satisfies MuiStyles;
 
 const CurveParameters = ({ path }: { path: string }) => {
     const intl = useIntl();
diff --git a/src/components/dialogs/parameters/dynamicsimulation/curve/common/checkbox-treeview.tsx b/src/components/dialogs/parameters/dynamicsimulation/curve/common/checkbox-treeview.tsx
index b869a3a9aa..31a6d9d6a5 100644
--- a/src/components/dialogs/parameters/dynamicsimulation/curve/common/checkbox-treeview.tsx
+++ b/src/components/dialogs/parameters/dynamicsimulation/curve/common/checkbox-treeview.tsx
@@ -7,8 +7,9 @@
 
 import * as React from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
-import { alpha, Checkbox, styled, SxProps, Theme, useTheme } from '@mui/material';
+import { alpha, Checkbox, styled, useTheme } from '@mui/material';
 import { SimpleTreeView, TreeItem, treeItemClasses } from '@mui/x-tree-view';
+import { type SxStyle } from '@gridsuite/commons-ui';
 import { ModelVariable } from '../../dynamic-simulation.type';
 
 enum CheckState {
@@ -53,7 +54,7 @@ interface CheckBoxTreeViewProps {
     checkAll: boolean;
     onSelectionChanged?: (newSelection: ModelVariable[]) => void;
     getLabel: (element: ModelVariable) => string;
-    sx: SxProps<Theme>;
+    sx: SxStyle;
 }
 
 interface ItemState {
diff --git a/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/curve-preview.tsx b/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/curve-preview.tsx
index 1e4024a323..eea84af105 100644
--- a/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/curve-preview.tsx
+++ b/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/curve-preview.tsx
@@ -7,8 +7,8 @@
 
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { Grid, Box, Typography, Theme } from '@mui/material';
-import { CustomAGGrid } from '@gridsuite/commons-ui';
+import { Box, Grid, Typography } from '@mui/material';
+import { CustomAGGrid, type MuiStyles } from '@gridsuite/commons-ui';
 import { ValueFormatterParams } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { EQUIPMENT_TYPES } from 'components/utils/equipment-types';
@@ -19,10 +19,10 @@ const styles = {
         width: 'auto',
         height: '100%',
     },
-    h6: (theme: Theme) => ({
+    h6: (theme) => ({
         marginBottom: theme.spacing(2),
     }),
-};
+} as const satisfies MuiStyles;
 
 export interface Curve {
     equipmentType: EQUIPMENT_TYPES;
diff --git a/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/curve-selector.tsx b/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/curve-selector.tsx
index a91108e8b5..dcf057707d 100644
--- a/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/curve-selector.tsx
+++ b/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/curve-selector.tsx
@@ -5,22 +5,23 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid, Theme, Typography } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import EquipmentFilter, { GetSelectedEquipmentsHandle } from './equipment-filter';
 import ModelFilter, { GetSelectedVariablesHandle } from './model-filter';
 import { FormattedMessage } from 'react-intl';
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { EQUIPMENT_TYPES } from '../../../../../utils/equipment-types';
 import { getReferencedEquipmentTypeForModel } from './curve-selector-utils';
 import { IdentifiableAttributes } from 'services/study/filter';
 import { ModelVariable } from '../../dynamic-simulation.type';
 
 const styles = {
-    h6: (theme: Theme) => ({
+    h6: (theme) => ({
         marginBottom: theme.spacing(2),
         marginLeft: theme.spacing(1),
     }),
-};
+} as const satisfies MuiStyles;
 
 export interface GetSelectedItemsHandler {
     api: {
diff --git a/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/equipment-filter.tsx b/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/equipment-filter.tsx
index 03e1d99fa1..e526d67663 100644
--- a/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/equipment-filter.tsx
+++ b/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/equipment-filter.tsx
@@ -5,11 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Box, Grid, MenuItem, Select, type SelectChangeEvent, type Theme, Typography } from '@mui/material';
+import { Box, Grid, MenuItem, Select, type SelectChangeEvent, Typography } from '@mui/material';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { CustomAGGrid, useSnackMessage } from '@gridsuite/commons-ui';
+import { CustomAGGrid, type MuiStyles, useSnackMessage } from '@gridsuite/commons-ui';
 import { fetchAllCountries } from '../../../../../../services/study/network-map';
 import { evaluateJsonFilter, type IdentifiableAttributes } from '../../../../../../services/study/filter';
 import { fetchVoltageLevelsMapInfos } from '../../../../../../services/study/network';
@@ -45,10 +45,10 @@ const styles = {
         width: '100%',
         flexGrow: 1,
     },
-    equipmentTitle: (theme: Theme) => ({
+    equipmentTitle: (theme) => ({
         marginBottom: theme.spacing(1),
     }),
-};
+} as const satisfies MuiStyles;
 
 const EquipmentFilter = forwardRef<GetSelectedEquipmentsHandle, EquipmentFilterProps>(
     ({ equipmentType: initialEquipmentType, onChangeEquipmentType }, ref) => {
diff --git a/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/model-filter.tsx b/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/model-filter.tsx
index dbabfd0e95..d5a4e403d0 100644
--- a/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/model-filter.tsx
+++ b/src/components/dialogs/parameters/dynamicsimulation/curve/dialog/model-filter.tsx
@@ -7,12 +7,12 @@
 
 import { FormattedMessage, IntlShape, useIntl } from 'react-intl';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Box, Grid, Theme, Typography } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import CheckboxSelect from '../common/checkbox-select';
 import CheckboxTreeview, { GetSelectedItemsHandle } from '../common/checkbox-treeview';
 import { lighten } from '@mui/material/styles';
 import { useSelector } from 'react-redux';
-
 import { fetchDynamicSimulationModels } from '../../../../../../services/study/dynamic-simulation';
 import { EQUIPMENT_TYPES } from '../../../../../utils/equipment-types';
 import { AppState } from 'redux/reducer';
@@ -136,7 +136,7 @@ const makeGetVariableLabel = (intl: IntlShape) => (elem: ModelVariable) => {
 };
 
 const styles = {
-    tree: (theme: Theme) => ({
+    tree: (theme) => ({
         width: '100%',
         height: '100%',
         border: 'solid',
@@ -147,7 +147,7 @@ const styles = {
     model: {
         width: '100%',
     },
-    modelTitle: (theme: Theme) => ({
+    modelTitle: (theme) => ({
         marginBottom: theme.spacing(1),
     }),
     variable: {
@@ -158,7 +158,7 @@ const styles = {
         maxHeight: '440px',
         maxWidth: '50px',
     },
-};
+} as const satisfies MuiStyles;
 
 const ModelFilter = forwardRef<GetSelectedVariablesHandle, ModelFilterProps>(
     ({ equipmentType = EQUIPMENT_TYPES.GENERATOR }, ref) => {
diff --git a/src/components/dialogs/parameters/dynamicsimulation/global-filter.tsx b/src/components/dialogs/parameters/dynamicsimulation/global-filter.tsx
index 8b5ccacac3..8fc6d8f943 100644
--- a/src/components/dialogs/parameters/dynamicsimulation/global-filter.tsx
+++ b/src/components/dialogs/parameters/dynamicsimulation/global-filter.tsx
@@ -6,18 +6,18 @@
  */
 
 import { InputAdornment, TextField } from '@mui/material';
-import { Theme } from '@mui/material/styles';
 import { useIntl } from 'react-intl';
 import { ChangeEvent, forwardRef, RefObject, useCallback, useImperativeHandle, useRef } from 'react';
 import SearchIcon from '@mui/icons-material/Search';
 import { AgGridReact } from 'ag-grid-react';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    searchSection: (theme: Theme) => ({
+    searchSection: (theme) => ({
         paddingRight: theme.spacing(1),
         alignItems: 'center',
     }),
-};
+} as const satisfies MuiStyles;
 
 interface GlobalFilterProps {
     gridRef: RefObject<AgGridReact>;
diff --git a/src/components/dialogs/parameters/util/styles.ts b/src/components/dialogs/parameters/util/styles.ts
index c48405e354..70feffddbc 100644
--- a/src/components/dialogs/parameters/util/styles.ts
+++ b/src/components/dialogs/parameters/util/styles.ts
@@ -4,14 +4,14 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Theme } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 export const parametersStyles = {
-    parameterName: (theme: Theme) => ({
+    parameterName: (theme) => ({
         fontWeight: 'bold',
         marginTop: theme.spacing(1),
     }),
-    scrollableGrid: (theme: Theme) => ({
+    scrollableGrid: (theme) => ({
         overflowY: 'auto',
         overflowX: 'hidden',
         maxHeight: '85%', // TODO This needs to be refactored
@@ -35,11 +35,11 @@ export const parametersStyles = {
         position: 'sticky',
         bottom: 0,
     },
-    panel: (theme: Theme) => ({
+    panel: (theme) => ({
         marginTop: theme.spacing(2),
         marginBottom: theme.spacing(1),
     }),
-    title: (theme: Theme) => ({
+    title: (theme) => ({
         padding: theme.spacing(2),
     }),
-};
+} as const satisfies MuiStyles;
diff --git a/src/components/dialogs/restore-modification-dialog.tsx b/src/components/dialogs/restore-modification-dialog.tsx
index 8baa9387ee..8fceb7b1f9 100644
--- a/src/components/dialogs/restore-modification-dialog.tsx
+++ b/src/components/dialogs/restore-modification-dialog.tsx
@@ -6,17 +6,14 @@
  */
 import { useEffect, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
 import {
-    Button,
-    Box,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
-    Theme,
-} from '@mui/material';
-import { CancelButton, CheckBoxList, useModificationLabelComputer, useSnackMessage } from '@gridsuite/commons-ui';
+    CancelButton,
+    CheckBoxList,
+    type MuiStyles,
+    useModificationLabelComputer,
+    useSnackMessage,
+} from '@gridsuite/commons-ui';
 import { deleteModifications, restoreModifications } from 'services/study/network-modifications';
 import { CustomDialog } from 'components/utils/custom-dialog';
 import { useSelector } from 'react-redux';
@@ -25,27 +22,27 @@ import { NetworkModificationMetadata } from 'components/graph/menus/network-modi
 import { toggleElementFromList } from 'components/utils/utils';
 
 const styles = {
-    text: (theme: Theme) => ({
+    text: (theme) => ({
         padding: theme.spacing(1),
     }),
-    listContainer: (theme: Theme) => ({
+    listContainer: (theme) => ({
         overflowY: 'auto',
         display: 'flex',
         flexDirection: 'column',
         flexGrow: 1,
         paddingBottom: theme.spacing(8),
     }),
-    selectAll: (theme: Theme) => ({
+    selectAll: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         paddingLeft: theme.spacing(3),
         paddingBottom: theme.spacing(1),
     }),
-    list: (theme: Theme) => ({
+    list: (theme) => ({
         paddingTop: theme.spacing(0),
         flexGrow: 1,
     }),
-};
+} as const satisfies MuiStyles;
 
 interface RestoreModificationDialogProps {
     open: boolean;
diff --git a/src/components/dialogs/root-network/root-network-case-selection.tsx b/src/components/dialogs/root-network/root-network-case-selection.tsx
index 600964238e..b17117dcdc 100644
--- a/src/components/dialogs/root-network/root-network-case-selection.tsx
+++ b/src/components/dialogs/root-network/root-network-case-selection.tsx
@@ -8,7 +8,7 @@
 import { Box, Button, Grid, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { TreeViewFinderNodeProps, fetchDirectoryElementPath } from '@gridsuite/commons-ui';
+import { fetchDirectoryElementPath, type MuiStyles, type TreeViewFinderNodeProps } from '@gridsuite/commons-ui';
 import { FolderOutlined } from '@mui/icons-material';
 import { UUID } from 'crypto';
 import ImportCaseDialog from '../import-case-dialog';
@@ -19,7 +19,7 @@ const styles = {
         marginTop: 0,
         display: 'block',
     },
-};
+} as const satisfies MuiStyles;
 
 interface RootNetworkCaseSelectionProps {
     onSelectCase: (selectedCase: TreeViewFinderNodeProps) => void;
diff --git a/src/components/graph/menus/create-child-menu-item.tsx b/src/components/graph/menus/create-child-menu-item.tsx
index 33e6488aed..8ae9ad0571 100644
--- a/src/components/graph/menus/create-child-menu-item.tsx
+++ b/src/components/graph/menus/create-child-menu-item.tsx
@@ -8,7 +8,7 @@
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import { FormattedMessage } from 'react-intl';
-import { CustomMenuItem } from '@gridsuite/commons-ui';
+import { CustomMenuItem, type MuiStyles } from '@gridsuite/commons-ui';
 import { FunctionComponent } from 'react';
 
 const styles = {
@@ -18,7 +18,8 @@ const styles = {
         // to justify menu items texts
         paddingLeft: '12px',
     },
-};
+} as const satisfies MuiStyles;
+
 interface ChildMenuItemProps {
     item: {
         id: string;
diff --git a/src/components/graph/menus/dynamic-simulation/scenario-editor.tsx b/src/components/graph/menus/dynamic-simulation/scenario-editor.tsx
index 424ee65682..b871c592de 100644
--- a/src/components/graph/menus/dynamic-simulation/scenario-editor.tsx
+++ b/src/components/graph/menus/dynamic-simulation/scenario-editor.tsx
@@ -5,10 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Theme } from '@mui/material/styles';
 import { EditableTitle } from '../network-modifications/editable-title';
 import { useDispatch, useSelector } from 'react-redux';
-
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { setToggleOptions } from '../../../../redux/actions';
 import { useIntl } from 'react-intl';
 import { AppState } from '../../../../redux/reducer';
@@ -17,14 +16,14 @@ import { Box } from '@mui/material';
 import { StudyDisplayMode } from 'components/network-modification.type';
 
 const styles = {
-    paper: {
+    paper: (theme) => ({
         height: '100%',
         display: 'flex',
         flexDirection: 'column',
         elevation: 3,
-        background: (theme: Theme) => theme.palette.background.paper,
-    },
-};
+        background: theme.palette.background.paper,
+    }),
+} as const satisfies MuiStyles;
 
 export interface ScenarioEditorProps {}
 
diff --git a/src/components/graph/menus/network-modifications/editable-title.tsx b/src/components/graph/menus/network-modifications/editable-title.tsx
index 2bac10712f..ebcac841cd 100644
--- a/src/components/graph/menus/network-modifications/editable-title.tsx
+++ b/src/components/graph/menus/network-modifications/editable-title.tsx
@@ -6,15 +6,15 @@
  */
 
 import { useState } from 'react';
-import { IconButton, Box, Theme } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import CloseIcon from '@mui/icons-material/Close';
-import { lighten, darken } from '@mui/material/styles';
-import { OverflowableText } from '@gridsuite/commons-ui';
+import { darken, lighten } from '@mui/material/styles';
+import { type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 import NodeNameEditDialog from '../node-name-edit-dialog';
 
 const styles = {
-    header: (theme: Theme) => ({
+    header: (theme) => ({
         backgroundColor: theme.palette.background.paper,
         padding: theme.spacing(1),
         color: theme.palette.getContrastText(
@@ -29,7 +29,7 @@ const styles = {
         flexGrow: 1,
         fontWeight: 'bold',
     },
-};
+} as const satisfies MuiStyles;
 
 interface EditableTitleProps {
     name: string;
diff --git a/src/components/graph/menus/network-modifications/loadflow-modifications/loadflow-modification-alert.tsx b/src/components/graph/menus/network-modifications/loadflow-modifications/loadflow-modification-alert.tsx
index 9f1c8ed32e..a5966493f9 100644
--- a/src/components/graph/menus/network-modifications/loadflow-modifications/loadflow-modification-alert.tsx
+++ b/src/components/graph/menus/network-modifications/loadflow-modifications/loadflow-modification-alert.tsx
@@ -6,24 +6,25 @@
  */
 
 import { CheckCircleOutlined } from '@mui/icons-material';
-import { Alert, Button, Theme } from '@mui/material';
+import { Alert, Button } from '@mui/material';
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { LoadflowModifications } from './loadflow-modifications';
 
 const styles = {
-    loadFlowModif: (theme: Theme) => ({
+    loadFlowModif: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         marginTop: theme.spacing(3),
         marginBottom: theme.spacing(2),
         marginRight: theme.spacing(2),
     }),
-    icon: (theme: Theme) => ({
+    icon: (theme) => ({
         marginRight: theme.spacing(1),
         fontSize: theme.spacing(2.75),
     }),
-};
+} as const satisfies MuiStyles;
 
 export const LoadflowModificationAlert = () => {
     const [isModificationDialogOpen, setIsModificationDialogOpen] = useState(false);
diff --git a/src/components/graph/menus/network-modifications/loadflow-modifications/loadflow-modifications.tsx b/src/components/graph/menus/network-modifications/loadflow-modifications/loadflow-modifications.tsx
index 5c69685396..b27c4f04eb 100644
--- a/src/components/graph/menus/network-modifications/loadflow-modifications/loadflow-modifications.tsx
+++ b/src/components/graph/menus/network-modifications/loadflow-modifications/loadflow-modifications.tsx
@@ -9,7 +9,7 @@ import { Box, Button, Dialog, DialogContent, DialogProps, DialogTitle, Tab, Tabs
 import { FunctionComponent, useCallback, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useLoadflowModifications } from './use-loadflow-modifications';
-import { CustomAGGrid } from '@gridsuite/commons-ui';
+import { CustomAGGrid, type MuiStyles } from '@gridsuite/commons-ui';
 import { AGGRID_LOCALES } from 'translations/not-intl/aggrid-locales';
 import { GridReadyEvent, RowDataUpdatedEvent, ValueFormatterParams } from 'ag-grid-community';
 import { SortWay } from 'types/custom-aggrid-types';
@@ -24,7 +24,7 @@ const styles = {
         top: 0,
         left: 0,
     },
-};
+} as const satisfies MuiStyles;
 
 interface LoadflowModificationsProps extends DialogProps {
     onClose: () => void;
diff --git a/src/components/graph/menus/network-modifications/network-modification-node-editor-utils.ts b/src/components/graph/menus/network-modifications/network-modification-node-editor-utils.ts
index c2ffd3ec8f..c2f7838d96 100644
--- a/src/components/graph/menus/network-modifications/network-modification-node-editor-utils.ts
+++ b/src/components/graph/menus/network-modifications/network-modification-node-editor-utils.ts
@@ -5,10 +5,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Theme } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 export const styles = {
-    listContainer: (theme: Theme) => ({
+    listContainer: (theme) => ({
         overflowY: 'auto',
         display: 'flex',
         flexDirection: 'column',
@@ -25,7 +25,7 @@ export const styles = {
         display: 'flex',
         alignItems: 'center',
     },
-    modificationsTitle: (theme: Theme) => ({
+    modificationsTitle: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         margin: theme.spacing(0),
@@ -34,9 +34,9 @@ export const styles = {
         borderBottom: theme.networkModificationPanel.border,
         overflow: 'hidden',
     }),
-    toolbar: (theme: Theme) => ({
+    toolbar: (theme) => ({
         '&': {
-            // Necessary to overrides some @media specific styles that are defined elsewhere
+            // Necessary to override some @media specific styles that are defined elsewhere
             padding: 0,
             minHeight: 0,
         },
@@ -44,21 +44,21 @@ export const styles = {
         margin: 0,
         flexShrink: 0,
     }),
-    toolbarCheckbox: (theme: Theme) => ({
+    toolbarCheckbox: (theme) => ({
         marginLeft: theme.spacing(1.5),
     }),
     filler: {
         flexGrow: 1,
     },
-    circularProgress: (theme: Theme) => ({
+    circularProgress: (theme) => ({
         marginRight: theme.spacing(2),
         color: theme.palette.primary.contrastText,
     }),
-    modificationCircularProgress: (theme: Theme) => ({
+    modificationCircularProgress: (theme) => ({
         marginRight: theme.spacing(2),
         color: theme.palette.primary.main,
     }),
-    toolbarCircularProgress: (theme: Theme) => ({
+    toolbarCircularProgress: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -66,7 +66,7 @@ export const styles = {
         marginRight: theme.spacing(2),
         color: theme.palette.secondary.main,
     }),
-    notification: (theme: Theme) => ({
+    notification: (theme) => ({
         flex: 1,
         alignContent: 'center',
         justifyContent: 'center',
@@ -74,13 +74,13 @@ export const styles = {
         textAlign: 'center',
         color: theme.palette.primary.main,
     }),
-    icon: (theme: Theme) => ({
+    icon: (theme) => ({
         width: theme.spacing(3),
     }),
-    iconEdit: (theme: Theme) => ({
+    iconEdit: (theme) => ({
         marginRight: theme.spacing(1),
     }),
-};
+} as const satisfies MuiStyles;
 
 export function isChecked(s1: number) {
     return s1 !== 0;
diff --git a/src/components/graph/menus/network-modifications/network-modifications-table.tsx b/src/components/graph/menus/network-modifications/network-modifications-table.tsx
index ef08ea18aa..317dba81d4 100644
--- a/src/components/graph/menus/network-modifications/network-modifications-table.tsx
+++ b/src/components/graph/menus/network-modifications/network-modifications-table.tsx
@@ -5,9 +5,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useCallback, useMemo, SetStateAction } from 'react';
-import { CustomAGGrid, NetworkModificationMetadata, useModificationLabelComputer } from '@gridsuite/commons-ui';
+import React, { SetStateAction, useCallback, useMemo } from 'react';
 import {
+    CustomAGGrid,
+    type MuiStyles,
+    type NetworkModificationMetadata,
+    useModificationLabelComputer,
+} from '@gridsuite/commons-ui';
+import type {
     CellClickedEvent,
     ColDef,
     GetRowIdParams,
@@ -20,7 +25,7 @@ import {
     ValueGetterParams,
 } from 'ag-grid-community';
 import { RemoveRedEye as RemoveRedEyeIcon } from '@mui/icons-material';
-import { Badge, Box, Theme } from '@mui/material';
+import { Badge, Box } from '@mui/material';
 import { useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
 import { useIntl } from 'react-intl';
@@ -35,7 +40,7 @@ import { ExcludedNetworkModifications } from './network-modification-menu.type';
 import { NetworkModificationNameCellRenderer } from 'components/custom-aggrid/cell-renderers';
 
 const styles = {
-    container: (theme: Theme) => ({
+    container: (theme) => ({
         position: 'relative',
         flexGrow: 1,
         marginTop: theme.spacing(1),
@@ -50,7 +55,7 @@ const styles = {
             backgroundColor: theme.palette.background.paper,
         },
     }),
-};
+} as const satisfies MuiStyles;
 
 interface NetworkModificationsTableProps extends Omit<NetworkModificationEditorNameHeaderProps, 'modificationCount'> {
     modifications: NetworkModificationMetadata[];
diff --git a/src/components/graph/menus/network-modifications/node-editor-header.tsx b/src/components/graph/menus/network-modifications/node-editor-header.tsx
index b036422ede..a2b6e21725 100644
--- a/src/components/graph/menus/network-modifications/node-editor-header.tsx
+++ b/src/components/graph/menus/network-modifications/node-editor-header.tsx
@@ -7,25 +7,25 @@
 
 import { useState } from 'react';
 import {
-    IconButton,
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
     Box,
-    Theme,
     Button,
+    IconButton,
     Tooltip,
     Typography,
-    Accordion,
-    AccordionSummary,
-    AccordionDetails,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import CloseIcon from '@mui/icons-material/Close';
-import { lighten, darken } from '@mui/material/styles';
+import { darken, lighten } from '@mui/material/styles';
 import { useSelector } from 'react-redux';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { AppState } from 'redux/reducer';
 import NetworkModificationNodeDialog from './network-modification-node-dialog';
 
 const styles = {
-    header: (theme: Theme) => ({
+    header: (theme) => ({
         padding: theme.spacing(1),
         color: theme.palette.getContrastText(
             theme.palette.mode === 'light'
@@ -56,14 +56,14 @@ const styles = {
         flexGrow: 1,
         overflow: 'hidden',
     },
-    accordion: (theme: Theme) => ({
+    accordion: (theme) => ({
         backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
         marginRight: theme.spacing(1),
         borderRadius: theme.shape.borderRadius,
         width: '100%',
         boxSizing: 'border-box',
     }),
-    accordionSummary: (theme: Theme) => ({
+    accordionSummary: (theme) => ({
         minHeight: 0,
         '&.Mui-expanded .MuiTypography-root': {
             color: theme.palette.text.secondary,
@@ -91,7 +91,7 @@ const styles = {
         maxHeight: 200,
         overflowY: 'auto',
     },
-};
+} as const satisfies MuiStyles;
 
 interface NodeEditorHeaderProps {
     onClose: () => void;
diff --git a/src/components/graph/menus/network-modifications/node-editor.tsx b/src/components/graph/menus/network-modifications/node-editor.tsx
index 85c1a163ed..951df2c451 100644
--- a/src/components/graph/menus/network-modifications/node-editor.tsx
+++ b/src/components/graph/menus/network-modifications/node-editor.tsx
@@ -5,11 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Theme } from '@mui/material/styles';
 import NetworkModificationNodeEditor from './network-modification-node-editor';
-import { ComputingType } from '@gridsuite/commons-ui';
+import { ComputingType, type MuiStyles } from '@gridsuite/commons-ui';
 import { useDispatch, useSelector } from 'react-redux';
-
 import { setToggleOptions } from '../../../../redux/actions';
 import { Box } from '@mui/material';
 import { AppState } from '../../../../redux/reducer';
@@ -20,14 +18,14 @@ import { StudyDisplayMode } from '../../../network-modification.type';
 import { LoadflowModificationAlert } from './loadflow-modifications/loadflow-modification-alert';
 
 const styles = {
-    paper: (theme: Theme) => ({
+    paper: (theme) => ({
         height: '100%',
         display: 'flex',
         flexDirection: 'column',
         elevation: 3,
         background: theme.palette.background.paper,
     }),
-};
+} as const satisfies MuiStyles;
 
 const NodeEditor = () => {
     const dispatch = useDispatch();
diff --git a/src/components/graph/menus/root-network/root-network-minimized-panel-content.tsx b/src/components/graph/menus/root-network/root-network-minimized-panel-content.tsx
index e488db285d..e679df714b 100644
--- a/src/components/graph/menus/root-network/root-network-minimized-panel-content.tsx
+++ b/src/components/graph/menus/root-network/root-network-minimized-panel-content.tsx
@@ -5,21 +5,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import { RemoveRedEye as RemoveRedEyeIcon } from '@mui/icons-material';
-
-import { Box, Theme, Badge, Stack, Chip } from '@mui/material';
+import { Badge, Box, Chip, Stack } from '@mui/material';
 import { useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
 
 const styles = {
-    panel: (theme: Theme) => ({
+    panel: (theme) => ({
         flexGrow: 1,
         display: 'flex',
         alignItems: 'center',
         padding: theme.spacing(1),
     }),
-    minimizedPanel: (theme: Theme) => ({
+    minimizedPanel: (theme) => ({
         marginLeft: theme.spacing(2),
     }),
     icon: {
@@ -27,7 +26,8 @@ const styles = {
         justifyContent: 'center',
         alignItems: 'center',
     },
-};
+} as const satisfies MuiStyles;
+
 interface RootNetworkMinimizedPanelContentProps {
     isRootNetworkPanelMinimized: boolean;
 }
diff --git a/src/components/graph/menus/root-network/root-network-modifications-search-results.tsx b/src/components/graph/menus/root-network/root-network-modifications-search-results.tsx
index b92269feb6..78e2f30384 100644
--- a/src/components/graph/menus/root-network/root-network-modifications-search-results.tsx
+++ b/src/components/graph/menus/root-network/root-network-modifications-search-results.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { Box, Divider } from '@mui/material';
-import { DeviceHubIcon, OverflowableText } from '@gridsuite/commons-ui';
+import { DeviceHubIcon, type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 import { ModificationsSearchResult } from './root-network.types';
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
@@ -31,7 +31,7 @@ const styles = {
     text: {
         marginLeft: '5px',
     },
-};
+} as const satisfies MuiStyles;
 
 interface RootNetworkModificationsSearchResultsProps {
     results: ModificationsSearchResult[];
diff --git a/src/components/graph/menus/root-network/root-network-node-editor.tsx b/src/components/graph/menus/root-network/root-network-node-editor.tsx
index abf1be81a0..fbe3f1aaf2 100644
--- a/src/components/graph/menus/root-network/root-network-node-editor.tsx
+++ b/src/components/graph/menus/root-network/root-network-node-editor.tsx
@@ -5,31 +5,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { CheckBoxList, mergeSx, Parameter, useSnackMessage } from '@gridsuite/commons-ui';
-
+import { CheckBoxList, mergeSx, type MuiStyles, type Parameter, useSnackMessage } from '@gridsuite/commons-ui';
 import {
     Delete as DeleteIcon,
     RemoveRedEye as RemoveRedEyeIcon,
     VisibilityOff as VisibilityOffIcon,
 } from '@mui/icons-material';
-
-import {
-    Box,
-    Checkbox,
-    CircularProgress,
-    Theme,
-    Toolbar,
-    Typography,
-    Badge,
-    IconButton,
-    Chip,
-    Tooltip,
-} from '@mui/material';
-
+import { Badge, Box, Checkbox, Chip, CircularProgress, IconButton, Toolbar, Tooltip, Typography } from '@mui/material';
 import { SetStateAction, useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
-
 import { UUID } from 'crypto';
 import { AppState } from 'redux/reducer';
 import { RootNetworkInfos, RootNetworkMetadata } from '../network-modifications/network-modification-menu.type';
@@ -41,11 +26,11 @@ import { customizeCurrentParameters, formatCaseImportParameters } from '../../ut
 import { useSyncNavigationActions } from 'hooks/use-sync-navigation-actions';
 
 const styles = {
-    checkboxListItem: (theme: Theme) => ({
+    checkboxListItem: (theme) => ({
         paddingRight: theme.spacing(1),
         paddingLeft: theme.spacing(1),
     }),
-    rootNetworksTitle: (theme: Theme) => ({
+    rootNetworksTitle: (theme) => ({
         display: 'flex',
         padding: theme.spacing(1),
         overflow: 'hidden',
@@ -56,7 +41,7 @@ const styles = {
         alignItems: 'center',
         justifyContent: 'space-between',
     }),
-    rootNetworkMonoRoot: (theme: Theme) => ({
+    rootNetworkMonoRoot: (theme) => ({
         display: 'flex',
         padding: theme.spacing(1),
         overflow: 'hidden',
@@ -71,13 +56,13 @@ const styles = {
             backgroundColor: theme.palette.action.hover,
         },
     }),
-    rootNetworkMonoRootHover: (theme: Theme) => ({
+    rootNetworkMonoRootHover: (theme) => ({
         cursor: 'pointer',
         '&:hover': {
             backgroundColor: theme.palette.action.hover,
         },
     }),
-    toolbar: (theme: Theme) => ({
+    toolbar: (theme) => ({
         '&': {
             // Necessary to overrides some @media specific styles that are defined elsewhere
             padding: 0,
@@ -87,23 +72,23 @@ const styles = {
         border: theme.spacing(1),
         flexShrink: 0,
     }),
-    toolbarIcon: (theme: Theme) => ({
+    toolbarIcon: (theme) => ({
         marginRight: theme.spacing(1),
     }),
     filler: {
         flexGrow: 1,
     },
-    toolbarCircularProgress: (theme: Theme) => ({
+    toolbarCircularProgress: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         marginLeft: theme.spacing(1.25),
         marginRight: theme.spacing(1.25),
     }),
-    icon: (theme: Theme) => ({
+    icon: (theme) => ({
         width: theme.spacing(3),
     }),
-};
+} as const satisfies MuiStyles;
 
 const ItemLabelSecondary = (item: RootNetworkMetadata) => {
     return <Chip size="small" label={item.tag} color="primary" />;
diff --git a/src/components/graph/menus/root-network/root-network-nodes-search-results.tsx b/src/components/graph/menus/root-network/root-network-nodes-search-results.tsx
index ff0ce6ea57..7f33465e95 100644
--- a/src/components/graph/menus/root-network/root-network-nodes-search-results.tsx
+++ b/src/components/graph/menus/root-network/root-network-nodes-search-results.tsx
@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { DeviceHubIcon, OverflowableText } from '@gridsuite/commons-ui';
+import { DeviceHubIcon, type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 import { Box, Divider } from '@mui/material';
 import React from 'react';
 
@@ -26,7 +26,8 @@ const styles = {
         minHeight: '20px',
         minWidth: '20px',
     },
-};
+} as const satisfies MuiStyles;
+
 export const RootNetworkNodesSearchResults: React.FC<RootNetworkNodesSearchResultsProps> = ({ results }) => {
     return (
         <Box sx={styles.container}>
diff --git a/src/components/graph/menus/root-network/root-network-panel-header.tsx b/src/components/graph/menus/root-network/root-network-panel-header.tsx
index f83716b94d..8557695b68 100644
--- a/src/components/graph/menus/root-network/root-network-panel-header.tsx
+++ b/src/components/graph/menus/root-network/root-network-panel-header.tsx
@@ -6,14 +6,15 @@
  */
 
 import React, { SetStateAction, useCallback, useState } from 'react';
-import { Box, IconButton, Theme, Tooltip, Typography } from '@mui/material';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { AppState } from 'redux/reducer';
 import {
+    fetchDirectoryElementPath,
     LeftPanelCloseIcon,
     LeftPanelOpenIcon,
+    type MuiStyles,
     OverflowableText,
-    Parameter,
-    fetchDirectoryElementPath,
+    type Parameter,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
 import { FormattedMessage, useIntl } from 'react-intl/lib';
@@ -21,7 +22,7 @@ import { FileUpload } from '@mui/icons-material';
 import RootNetworkDialog, { FormData } from '../../../dialogs/root-network/root-network-dialog';
 import { createRootNetwork } from 'services/root-network';
 import { UUID } from 'crypto';
-import { GetCaseImportParametersReturn, getCaseImportParameters } from 'services/network-conversion';
+import { getCaseImportParameters, GetCaseImportParametersReturn } from 'services/network-conversion';
 import { customizeCurrentParameters, formatCaseImportParameters } from '../../util/case-import-parameters';
 import { useDispatch, useSelector } from 'react-redux';
 import { setMonoRootStudy } from 'redux/actions';
@@ -29,24 +30,25 @@ import { CustomDialog } from 'components/utils/custom-dialog';
 import SearchIcon from '@mui/icons-material/Search';
 
 const styles = {
-    headerPanel: (theme: Theme) => ({
+    headerPanel: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         padding: theme.spacing(1),
     }),
-    rootNameTitle: (theme: Theme) => ({
+    rootNameTitle: {
         fontWeight: 'bold',
-    }),
-    headerLeftContainer: (theme: Theme) => ({
+    },
+    headerLeftContainer: (theme) => ({
         marginLeft: theme.spacing(2),
         display: 'flex',
         alignItems: 'center',
         flexGrow: 1,
     }),
-    uploadButton: (theme: Theme) => ({
+    uploadButton: (theme) => ({
         marginLeft: theme.spacing(2),
     }),
-};
+} as const satisfies MuiStyles;
+
 interface RootNetworkPanelHeaderProps {
     isRootNetworksProcessing: boolean;
     setIsRootNetworksProcessing: React.Dispatch<SetStateAction<boolean>>;
diff --git a/src/components/graph/menus/root-network/root-network-panel-search.tsx b/src/components/graph/menus/root-network/root-network-panel-search.tsx
index 8a71237051..e8a5c77563 100644
--- a/src/components/graph/menus/root-network/root-network-panel-search.tsx
+++ b/src/components/graph/menus/root-network/root-network-panel-search.tsx
@@ -5,13 +5,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { useState } from 'react';
-import { Box, Typography, Tabs, Tab, Tooltip, Theme } from '@mui/material';
+import { Box, Tab, Tabs, Tooltip, Typography } from '@mui/material';
 import { ModificationsSearchResult } from './root-network.types';
 import RootNetworkMinimizedPanelContent from './root-network-minimized-panel-content';
 import { FormattedMessage, useIntl } from 'react-intl';
 import InfoIcon from '@mui/icons-material/Info';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { RootNetworkModificationsSearchResults } from './root-network-modifications-search-results';
-
 import { useRootNetworkSearchNotifications } from './use-root-network-search-notifications';
 import SearchBar from './root-network-search-bar';
 import { RootNetworkNodesSearchResults } from './root-network-nodes-search-results';
@@ -39,7 +39,7 @@ function isNodeTab(tabValue: TAB_VALUES): boolean {
 }
 
 const styles = {
-    root: (theme: Theme) => ({
+    root: (theme) => ({
         margin: theme.spacing(2),
     }),
     searchField: {
@@ -60,7 +60,7 @@ const styles = {
         justifyContent: 'center',
         alignItems: 'center',
     },
-};
+} as const satisfies MuiStyles;
 
 const RootNetworkSearchPanel: React.FC<RootNetworkSearchPanelProps> = ({ setIsSearchActive }) => {
     const intl = useIntl();
diff --git a/src/components/graph/menus/root-network/root-network-panel.tsx b/src/components/graph/menus/root-network/root-network-panel.tsx
index 7ddad104d5..2e604cf40d 100644
--- a/src/components/graph/menus/root-network/root-network-panel.tsx
+++ b/src/components/graph/menus/root-network/root-network-panel.tsx
@@ -11,6 +11,7 @@ import RootNetworkPanelHeader from './root-network-panel-header';
 import RootNetworkMinimizedPanelContent from './root-network-minimized-panel-content';
 import RootNetworkNodeEditor from './root-network-node-editor';
 import { useSelector } from 'react-redux';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { AppState } from 'redux/reducer';
 import { useRootNetworkNotifications } from './use-root-network-notifications';
 import RootNetworkSearchPanel from './root-network-panel-search';
@@ -24,7 +25,7 @@ const styles = {
         zIndex: 10,
         overflow: 'hidden',
     },
-};
+} as const satisfies MuiStyles;
 
 const RootNetworkPanel: FunctionComponent = () => {
     const [isRootNetworksProcessing, setIsRootNetworksProcessing] = useState(false);
diff --git a/src/components/graph/nodes/build-button.tsx b/src/components/graph/nodes/build-button.tsx
index fd71f21bb1..5705512490 100644
--- a/src/components/graph/nodes/build-button.tsx
+++ b/src/components/graph/nodes/build-button.tsx
@@ -8,10 +8,10 @@
 import { BUILD_STATUS } from 'components/network/constants';
 import React, { useCallback, useState } from 'react';
 import { PlayCircleFilled, StopCircleOutlined } from '@mui/icons-material';
-import { Button, CircularProgress, Theme } from '@mui/material';
+import { Button, CircularProgress } from '@mui/material';
 import { buildNode, unbuildNode } from '../../../services/study';
 import { UUID } from 'crypto';
-import { useSnackMessage } from '@gridsuite/commons-ui';
+import { type MuiStyles, useSnackMessage } from '@gridsuite/commons-ui';
 import { HTTP_MAX_NODE_BUILDS_EXCEEDED_MESSAGE } from 'components/network-modification-tree-pane';
 
 type BuildButtonProps = {
@@ -25,10 +25,10 @@ const styles = {
     button: {
         minWidth: '40px',
     },
-    playColor: (theme: Theme) => ({
+    playColor: (theme) => ({
         color: theme.palette.mode === 'light' ? 'grey' : 'white',
     }),
-};
+} as const satisfies MuiStyles;
 
 export const BuildButton = ({ buildStatus, studyUuid, currentRootNetworkUuid, nodeUuid }: BuildButtonProps) => {
     const [isLoading, setIsLoading] = useState(false);
diff --git a/src/components/graph/nodes/build-status-chip.tsx b/src/components/graph/nodes/build-status-chip.tsx
index de15261fc9..ed2beca07b 100644
--- a/src/components/graph/nodes/build-status-chip.tsx
+++ b/src/components/graph/nodes/build-status-chip.tsx
@@ -6,13 +6,13 @@
  */
 
 import React, { ReactElement } from 'react';
-import { Chip, SxProps, Theme } from '@mui/material';
+import { Chip } from '@mui/material';
 import { useIntl } from 'react-intl';
 import { BUILD_STATUS } from 'components/network/constants';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type SxStyle } from '@gridsuite/commons-ui';
 
-function getBuildStatusSx(buildStatus: BUILD_STATUS | undefined): SxProps<Theme> {
-    return (theme: Theme) => {
+function getBuildStatusSx(buildStatus: BUILD_STATUS | undefined): SxStyle {
+    return (theme) => {
         const bs = theme.node.buildStatus;
         // pick background based on status
         let bg: string;
@@ -45,16 +45,17 @@ function getBuildStatusSx(buildStatus: BUILD_STATUS | undefined): SxProps<Theme>
     };
 }
 
-const baseStyle = {
-    padding: (theme: Theme) => theme.spacing(1, 0.5),
-    fontSize: '12px',
-    fontWeight: 400,
-    lineHeight: '100%',
-};
+const baseStyle: SxStyle = (theme) =>
+    ({
+        padding: theme.spacing(1, 0.5),
+        fontSize: '12px',
+        fontWeight: 400,
+        lineHeight: '100%',
+    }) as const;
 
 type BuildStatusChipProps = {
     buildStatus?: BUILD_STATUS;
-    sx?: SxProps<Theme>;
+    sx?: SxStyle;
     icon?: ReactElement;
     onClick?: (e: React.MouseEvent) => void;
 };
diff --git a/src/components/graph/nodes/labeled-group-node.tsx b/src/components/graph/nodes/labeled-group-node.tsx
index 48a28bda38..b18d07ca2a 100644
--- a/src/components/graph/nodes/labeled-group-node.tsx
+++ b/src/components/graph/nodes/labeled-group-node.tsx
@@ -5,11 +5,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Box, Theme } from '@mui/material';
+import { Box } from '@mui/material';
 import { NodeProps, ReactFlowState, useStore } from '@xyflow/react';
 import { nodeHeight as nodeLayoutHeight, nodeWidth as nodeLayoutWidth } from '../layout';
 import SecurityIcon from '@mui/icons-material/Security';
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { LabeledGroupNodeType } from './labeled-group-node.type';
 import { NODE_HEIGHT, NODE_WIDTH } from './constants';
 
@@ -18,7 +19,7 @@ const styles = {
         border: 'dashed 3px #8B8F8F',
         borderRadius: '8px',
     },
-    label: (theme: Theme) => ({
+    label: (theme) => ({
         position: 'absolute',
         top: -13,
         right: 8,
@@ -31,7 +32,7 @@ const styles = {
         gap: '10px',
         alignItems: 'center',
     }),
-};
+} as const satisfies MuiStyles;
 
 export function LabeledGroupNode({ data }: NodeProps<LabeledGroupNodeType>) {
     // Vertically, the border is halfway between the node and the edge above,
diff --git a/src/components/graph/nodes/network-modification-node.tsx b/src/components/graph/nodes/network-modification-node.tsx
index 00cb07e0c3..a95e18fc53 100644
--- a/src/components/graph/nodes/network-modification-node.tsx
+++ b/src/components/graph/nodes/network-modification-node.tsx
@@ -9,34 +9,33 @@ import { NodeProps, Position } from '@xyflow/react';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import { useSelector } from 'react-redux';
 import Box from '@mui/material/Box';
-import { LIGHT_THEME, OverflowableText } from '@gridsuite/commons-ui';
+import { LIGHT_THEME, type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 import { getLocalStorageTheme } from '../../../redux/session-storage/local-storage';
 import { BUILD_STATUS } from '../../network/constants';
-import { Theme } from '@mui/material';
 import { AppState } from 'redux/reducer';
 import { CopyType } from 'components/network-modification.type';
 import { ModificationNode } from '../tree-node.type';
 import NodeHandle from './node-handle';
-import { baseNodeStyles, interactiveNodeStyles, selectedBaseNodeStyles } from './styles';
+import { baseNodeStyles, interactiveNodeStyles } from './styles';
 import NodeOverlaySpinner from './node-overlay-spinner';
 import BuildStatusChip from './build-status-chip';
 import React from 'react';
 import { BuildButton } from './build-button';
 
 const styles = {
-    networkModificationSelected: (theme: Theme) => ({
-        ...selectedBaseNodeStyles(theme, 'column'),
+    networkModificationSelected: (theme) => ({
+        ...baseNodeStyles(theme, 'column'),
         background: theme.node.modification.selectedBackground,
         border: theme.node.modification.selectedBorder,
         boxShadow: theme.shadows[6],
         ...interactiveNodeStyles(theme, 'modification'),
     }),
-    networkModification: (theme: Theme) => ({
+    networkModification: (theme) => ({
         ...baseNodeStyles(theme, 'column'),
         border: theme.node.modification.border,
         ...interactiveNodeStyles(theme, 'modification'),
     }),
-    contentBox: (theme: Theme) => ({
+    contentBox: (theme) => ({
         flexGrow: 1,
         display: 'flex',
         alignItems: 'flex-end',
@@ -44,27 +43,27 @@ const styles = {
         marginRight: theme.spacing(1),
         marginBottom: theme.spacing(1),
     }),
-    overflowText: (theme: Theme) => ({
+    overflowText: (theme) => ({
         color: theme.palette.text.primary,
         fontSize: '20px',
         fontWeight: 400,
         lineHeight: 'normal',
         textAlign: 'left',
     }),
-    footerBox: (theme: Theme) => ({
+    footerBox: (theme) => ({
         display: 'flex',
         justifyContent: 'flex-start',
         marginLeft: theme.spacing(1),
         height: '35%',
     }),
-    buildBox: (theme: Theme) => ({
+    buildBox: (theme) => ({
         display: 'flex',
         justifyContent: 'flex-end',
         marginTop: theme.spacing(-5),
         marginRight: theme.spacing(0),
         height: '35%',
     }),
-    chipFloating: (theme: Theme) => ({
+    chipFloating: (theme) => ({
         position: 'absolute',
         top: theme.spacing(-4),
         left: theme.spacing(1),
@@ -73,7 +72,7 @@ const styles = {
     tooltip: {
         maxWidth: '720px',
     },
-};
+} as const satisfies MuiStyles;
 
 const NetworkModificationNode = (props: NodeProps<ModificationNode>) => {
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
diff --git a/src/components/graph/nodes/root-node.tsx b/src/components/graph/nodes/root-node.tsx
index 9a5cf765c7..257102ec18 100644
--- a/src/components/graph/nodes/root-node.tsx
+++ b/src/components/graph/nodes/root-node.tsx
@@ -10,36 +10,35 @@ import { NodeProps, Position } from '@xyflow/react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
 import { RootNode as RootNodeType } from 'components/graph/tree-node.type';
-import { Theme } from '@mui/material/styles';
 import { Box } from '@mui/material';
-import { OverflowableText } from '@gridsuite/commons-ui';
+import { type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 import { DeviceHub } from '@mui/icons-material';
 import NodeHandle from './node-handle';
-import { baseNodeStyles, interactiveNodeStyles, selectedBaseNodeStyles } from './styles';
+import { baseNodeStyles, interactiveNodeStyles } from './styles';
 
 const styles = {
     // full node container styles
-    rootSelected: (theme: Theme) => ({
-        ...selectedBaseNodeStyles(theme, 'row'),
+    rootSelected: (theme) => ({
+        ...baseNodeStyles(theme, 'row'),
         background: theme.node.root.selectedBackground,
         border: theme.node.root.border,
         boxShadow: theme.shadows[10],
         ...interactiveNodeStyles(theme, 'root'),
     }),
-    root: (theme: Theme) => ({
+    root: (theme) => ({
         ...baseNodeStyles(theme, 'row'),
         border: theme.node.root.border,
         ...interactiveNodeStyles(theme, 'root'),
     }),
 
-    iconContainer: (theme: Theme) => ({
+    iconContainer: (theme) => ({
         flexGrow: 1,
         display: 'flex',
         alignItems: 'center',
         marginLeft: theme.spacing(1),
     }),
 
-    iconButton: (theme: Theme) => ({
+    iconButton: (theme) => ({
         width: 37,
         height: 37,
         background: theme.node.root.icon.background,
@@ -49,13 +48,13 @@ const styles = {
         },
     }),
 
-    deviceIcon: (theme: Theme) => ({
+    deviceIcon: (theme) => ({
         fill: theme.node.root.icon.fill,
         width: 18,
         height: 18,
     }),
 
-    labelContainer: (theme: Theme) => ({
+    labelContainer: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'flex-start',
@@ -63,14 +62,14 @@ const styles = {
         marginRight: theme.spacing(1),
     }),
 
-    overflowText: (theme: Theme) => ({
+    overflowText: (theme) => ({
         color: theme.palette.text.primary,
         fontSize: '14px',
         fontWeight: 400,
         lineHeight: 'normal',
         textAlign: 'left',
     }),
-};
+} as const satisfies MuiStyles;
 
 const RootNode = (props: NodeProps<RootNodeType>) => {
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
diff --git a/src/components/graph/nodes/styles.ts b/src/components/graph/nodes/styles.ts
index 643fa43c8b..cca6e64b1d 100644
--- a/src/components/graph/nodes/styles.ts
+++ b/src/components/graph/nodes/styles.ts
@@ -5,39 +5,41 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { LIGHT_THEME } from '@gridsuite/commons-ui';
+import { LIGHT_THEME, type SxStyle } from '@gridsuite/commons-ui';
 import { Theme } from '@mui/material';
 import { getLocalStorageTheme } from 'redux/session-storage/local-storage';
 import { NODE_HEIGHT, NODE_WIDTH } from './constants';
 
-export const baseNodeStyles = (theme: Theme, direction: 'row' | 'column') => ({
-    height: NODE_HEIGHT,
-    width: NODE_WIDTH,
-    display: 'flex',
-    flexDirection: direction,
-    justifyContent: 'space-between',
-    p: 1,
-    alignItems: 'stretch',
-    background: theme.node.common.background,
-    borderRadius: '8px',
-    overflow: 'hidden',
-});
-
-export const selectedBaseNodeStyles = (theme: Theme, direction: 'row' | 'column') => ({
-    ...baseNodeStyles(theme, direction),
-});
-
-export const interactiveNodeStyles = (theme: Theme, nodeKey: 'modification' | 'root') => ({
-    '&:hover': {
+export const baseNodeStyles = (theme: Theme, direction: 'row' | 'column') =>
+    ({
+        height: NODE_HEIGHT,
+        width: NODE_WIDTH,
+        display: 'flex',
+        flexDirection: direction,
+        justifyContent: 'space-between',
+        p: 1,
+        alignItems: 'stretch',
         background: theme.node.common.background,
-        borderColor: theme.node?.[nodeKey]?.hoverBorderColor,
-        boxShadow:
-            getLocalStorageTheme() === LIGHT_THEME && nodeKey === 'modification' ? theme.shadows[8] : theme.shadows[12],
-    },
-    '&:active': {
-        background: theme.node.common.activeBackground,
-        borderColor: theme.node?.[nodeKey]?.activeBorderColor,
-        boxShadow:
-            getLocalStorageTheme() === LIGHT_THEME && nodeKey === 'modification' ? theme.shadows[6] : theme.shadows[12],
-    },
-});
+        borderRadius: '8px',
+        overflow: 'hidden',
+    }) as const satisfies SxStyle;
+
+export const interactiveNodeStyles = (theme: Theme, nodeKey: 'modification' | 'root') =>
+    ({
+        '&:hover': {
+            background: theme.node.common.background,
+            borderColor: theme.node?.[nodeKey]?.hoverBorderColor,
+            boxShadow:
+                getLocalStorageTheme() === LIGHT_THEME && nodeKey === 'modification'
+                    ? theme.shadows[8]
+                    : theme.shadows[12],
+        },
+        '&:active': {
+            background: theme.node.common.activeBackground,
+            borderColor: theme.node?.[nodeKey]?.activeBorderColor,
+            boxShadow:
+                getLocalStorageTheme() === LIGHT_THEME && nodeKey === 'modification'
+                    ? theme.shadows[6]
+                    : theme.shadows[12],
+        },
+    }) as const satisfies SxStyle;
diff --git a/src/components/grid-layout/cards/card-styles.ts b/src/components/grid-layout/cards/card-styles.ts
index 412015e73b..f494e011ab 100644
--- a/src/components/grid-layout/cards/card-styles.ts
+++ b/src/components/grid-layout/cards/card-styles.ts
@@ -4,10 +4,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Theme } from '@mui/material';
+
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 export const cardStyles = {
-    card: (theme: Theme) => ({
+    card: {
         display: 'flex',
         flexDirection: 'column',
         '& .react-resizable-handle, .card-header-close-button': {
@@ -18,8 +19,8 @@ export const cardStyles = {
                 visibility: 'visible',
             },
         },
-    }),
-    alertMessage: (theme: Theme) => ({
+    },
+    alertMessage: (theme) => ({
         borderRadius: '0 0 0 0',
         border:
             theme.palette.mode === 'light'
@@ -28,7 +29,7 @@ export const cardStyles = {
         borderTop: 'none', // remove the top border to avoid double border with CustomCardHeader
         borderBottom: 'none',
     }),
-    diagramContainer: (theme: Theme) => ({
+    diagramContainer: (theme) => ({
         flexGrow: 1,
         overflow: 'hidden',
         position: 'relative',
@@ -40,4 +41,4 @@ export const cardStyles = {
                 : `1px solid ${theme.palette.grey[800]}`,
         borderTop: 'none', // remove the top border to avoid double border with CustomCardHeader
     }),
-};
+} as const satisfies MuiStyles;
diff --git a/src/components/grid-layout/cards/custom-card-header.tsx b/src/components/grid-layout/cards/custom-card-header.tsx
index b20b31f255..5b7111b3f9 100644
--- a/src/components/grid-layout/cards/custom-card-header.tsx
+++ b/src/components/grid-layout/cards/custom-card-header.tsx
@@ -5,16 +5,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import Box from '@mui/material/Box';
-import { mergeSx, OverflowableText } from '@gridsuite/commons-ui';
-import IconButton from '@mui/material/IconButton';
+import { Box, IconButton, Typography } from '@mui/material';
+import { mergeSx, type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 import CloseIcon from '@mui/icons-material/Close';
-import { Theme, Typography } from '@mui/material';
 
 export const BLINK_LENGTH_MS = 1800;
 
 const styles = {
-    header: (theme: Theme) => ({
+    header: (theme) => ({
         paddingLeft: theme.spacing(1),
         display: 'flex',
         alignItems: 'center',
@@ -26,7 +24,7 @@ const styles = {
         borderRadius: theme.spacing(2) + ' ' + theme.spacing(2) + ' 0 0',
         cursor: 'grab',
     }),
-    blink: (theme: Theme) => ({
+    blink: (theme) => ({
         animation: 'diagramHeaderBlinkAnimation ' + BLINK_LENGTH_MS + 'ms',
         '@keyframes diagramHeaderBlinkAnimation': {
             // This adds a global css rule, so we keep the rule's name specific.
@@ -41,7 +39,7 @@ const styles = {
     tooltip: {
         maxWidth: '720px',
     },
-};
+} as const satisfies MuiStyles;
 
 interface CustomCardHeaderProps {
     title?: React.ReactNode;
diff --git a/src/components/grid-layout/cards/diagrams/diagram-styles.ts b/src/components/grid-layout/cards/diagrams/diagram-styles.ts
index 4570cfc1b2..f98dcb725f 100644
--- a/src/components/grid-layout/cards/diagrams/diagram-styles.ts
+++ b/src/components/grid-layout/cards/diagrams/diagram-styles.ts
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Theme } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { INVALID_LOADFLOW_OPACITY } from 'utils/colors';
 
 export const styles = {
@@ -24,14 +24,14 @@ export const styles = {
         },
         overflow: 'hidden',
     },
-    divNetworkAreaDiagram: (theme: Theme) => ({
+    divNetworkAreaDiagram: (theme) => ({
         height: '100%',
         '& .nad-label-box': {
             color: theme.palette.text.primary,
             fontFamily: theme.typography.fontFamily,
         },
     }),
-    divSingleLineDiagram: (theme: Theme) => ({
+    divSingleLineDiagram: (theme) => ({
         '& polyline': {
             pointerEvents: 'none',
         },
@@ -51,11 +51,11 @@ export const styles = {
             fill: theme.palette.text.primary,
         },
     }),
-    divSingleLineDiagramHideLockAndBolt: (_theme: Theme) => ({
+    divSingleLineDiagramHideLockAndBolt: {
         '& .sld-flash, .sld-lock': {
             display: 'none',
         },
-    }),
+    },
     divDiagramReadOnly: {
         '& .sld-in .sld-label': {
             display: 'none',
@@ -104,9 +104,9 @@ export const styles = {
             transform: 'unset !important',
         },
     },
-    paperBorders: (theme: Theme) => ({
+    paperBorders: (theme) => ({
         borderLeft: '1px solid ' + theme.palette.action.disabled,
         borderBottom: '1px solid ' + theme.palette.action.disabledBackground,
         borderRight: '1px solid ' + theme.palette.action.hover,
     }),
-};
+} as const satisfies MuiStyles;
diff --git a/src/components/grid-layout/cards/diagrams/networkAreaDiagram/diagram-controls.tsx b/src/components/grid-layout/cards/diagrams/networkAreaDiagram/diagram-controls.tsx
index c536c6e9cc..1b9fa1eb8a 100644
--- a/src/components/grid-layout/cards/diagrams/networkAreaDiagram/diagram-controls.tsx
+++ b/src/components/grid-layout/cards/diagrams/networkAreaDiagram/diagram-controls.tsx
@@ -14,11 +14,12 @@ import {
     DirectoryItemSelector,
     ElementSaveDialog,
     ElementType,
-    EquipmentInfos,
+    type EquipmentInfos,
     EquipmentType,
-    IElementCreationDialog,
-    IElementUpdateDialog,
-    TreeViewFinderNodeProps,
+    type IElementCreationDialog,
+    type IElementUpdateDialog,
+    type MuiStyles,
+    type TreeViewFinderNodeProps,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
 import IconButton from '@mui/material/IconButton';
@@ -27,7 +28,7 @@ import Button from '@mui/material/Button';
 import SaveIcon from '@mui/icons-material/Save';
 import SpeakerNotesOffOutlinedIcon from '@mui/icons-material/SpeakerNotesOffOutlined';
 import SpeakerNotesOutlinedIcon from '@mui/icons-material/SpeakerNotesOutlined';
-import { Theme, Tooltip } from '@mui/material';
+import { Tooltip } from '@mui/material';
 import { AppState } from 'redux/reducer';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { UUID } from 'crypto';
@@ -37,11 +38,11 @@ import { fetchNetworkElementInfos } from 'services/study/network';
 import { EQUIPMENT_INFOS_TYPES, EQUIPMENT_TYPES } from 'components/utils/equipment-types';
 
 const styles = {
-    actionIcon: (theme: Theme) => ({
+    actionIcon: (theme) => ({
         width: theme.spacing(3),
         height: theme.spacing(3),
     }),
-    panel: (theme: Theme) => ({
+    panel: (theme) => ({
         backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.background.default,
         borderRadius: theme.spacing(1),
         padding: theme.spacing(0.5),
@@ -50,7 +51,7 @@ const styles = {
         top: theme.spacing(1),
         left: theme.spacing(1),
     }),
-    buttonPanel: (theme: Theme) => ({
+    buttonPanel: (theme) => ({
         borderRadius: theme.spacing(1),
         padding: theme.spacing(0.5),
         display: 'block',
@@ -64,11 +65,11 @@ const styles = {
     button: {
         minWidth: 'auto',
     },
-    divider: (theme: Theme) => ({
+    divider: (theme) => ({
         borderColor: theme.palette.grey[600],
         margin: '2px 4px',
     }),
-};
+} as const satisfies MuiStyles;
 
 interface DiagramControlsProps {
     onSave?: (data: IElementCreationDialog) => void;
diff --git a/src/components/grid-layout/cards/diagrams/networkAreaDiagram/node-context-menu.tsx b/src/components/grid-layout/cards/diagrams/networkAreaDiagram/node-context-menu.tsx
index 6206f27975..1d2ed30c63 100644
--- a/src/components/grid-layout/cards/diagrams/networkAreaDiagram/node-context-menu.tsx
+++ b/src/components/grid-layout/cards/diagrams/networkAreaDiagram/node-context-menu.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { Menu, Typography, ListItemIcon, ListItemText } from '@mui/material';
-import { CustomMenuItem } from '@gridsuite/commons-ui';
+import { CustomMenuItem, type MuiStyles } from '@gridsuite/commons-ui';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { useIntl } from 'react-intl';
 import { AddLocationOutlined } from '@mui/icons-material';
@@ -21,7 +21,7 @@ const styles = {
         paddingTop: '1px',
         paddingBottom: '1px',
     },
-};
+} as const satisfies MuiStyles;
 
 interface MenuAnchorPosition {
     mouseX: number;
diff --git a/src/components/grid-layout/cards/diagrams/singleLineDiagram/hooks/use-one-bus-shortcircuit-analysis-loader.tsx b/src/components/grid-layout/cards/diagrams/singleLineDiagram/hooks/use-one-bus-shortcircuit-analysis-loader.tsx
index 842b83c887..8dd961fadf 100644
--- a/src/components/grid-layout/cards/diagrams/singleLineDiagram/hooks/use-one-bus-shortcircuit-analysis-loader.tsx
+++ b/src/components/grid-layout/cards/diagrams/singleLineDiagram/hooks/use-one-bus-shortcircuit-analysis-loader.tsx
@@ -10,7 +10,8 @@ import { ReactElement, useCallback, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
-import { Chip, darken, lighten, Theme } from '@mui/material';
+import { Chip, darken, lighten } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { setOneBusShortcircuitAnalysisDiagram } from 'redux/actions';
 import { AppDispatch } from 'redux/store';
 import {
@@ -18,20 +19,8 @@ import {
     isOneBusShortCircuitResultNotification,
 } from 'types/notification-types';
 
-/**
- * A hook that handles the logic behind the diagram one bus shortcircuit analysis loader
- *
- * @param {string} diagramId - Identifier for the diagram which launched the computation
- * @param {UUID} currentNodeId - Identifier for the node which launched the computation
-
- * @returns {oneBusShortcircuitAnalysisLoader} array which contains the controls necessary for the one bus
- * shortcircuit analysis loader. It also comes with a boolean to check if the loader needs to be displayed
- * and the message to display for the UI
- *
- */
-
 const styles = {
-    loaderMessage: (theme: Theme) => ({
+    loaderMessage: (theme) => ({
         display: 'flex',
         position: 'relative',
         width: 'fit-content',
@@ -41,12 +30,23 @@ const styles = {
                 ? darken(theme.palette.background.paper, 0.1)
                 : lighten(theme.palette.background.paper, 0.2),
     }),
-};
+} as const satisfies MuiStyles;
 
 //Here's the rundown of the signature : the ReactElement is related to the loader JSX component, the boolean indicated wether the loader should be active,
 //the first function submits the sld data on hand to the redux store and the second function reset the redux store state
 type oneBusShortcircuitAnalysisLoader = [ReactElement, boolean, () => void, () => void];
 
+/**
+ * A hook that handles the logic behind the diagram one bus shortcircuit analysis loader
+ *
+ * @param {string} diagramId - Identifier for the diagram which launched the computation
+ * @param {UUID} nodeId - Identifier for the node which launched the computation
+ * @param rootNetworkUuid
+ *
+ * @returns {oneBusShortcircuitAnalysisLoader} array which contains the controls necessary for the one bus
+ * shortcircuit analysis loader. It also comes with a boolean to check if the loader needs to be displayed
+ * and the message to display for the UI
+ */
 export function useOneBusShortcircuitAnalysisLoader(
     diagramId: string,
     nodeId: UUID,
diff --git a/src/components/grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/diagram-header.tsx b/src/components/grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/diagram-header.tsx
index 7b4bfd1adf..42bbecd830 100644
--- a/src/components/grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/diagram-header.tsx
+++ b/src/components/grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/diagram-header.tsx
@@ -7,13 +7,12 @@
 
 import { useCallback } from 'react';
 import Box from '@mui/material/Box';
-import { OverflowableText } from '@gridsuite/commons-ui';
+import { type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
-import { Theme } from '@mui/material';
 
 const styles = {
-    header: (theme: Theme) => ({
+    header: (theme) => ({
         // prevent header from making the window wider, prevent bugs when displaying a lot of different voltage levels
         position: 'absolute',
         width: '100%',
@@ -26,11 +25,11 @@ const styles = {
         borderBottom: 'solid 1px',
         borderBottomColor: theme.palette.mode === 'light' ? theme.palette.action.selected : 'transparent',
     }),
-    close: (theme: Theme) => ({
+    close: (theme) => ({
         padding: 0,
         borderRight: theme.spacing(1),
     }),
-};
+} as const satisfies MuiStyles;
 
 interface DiagramHeaderProps {
     diagramTitle?: string;
diff --git a/src/components/grid-layout/cards/map/map-card.tsx b/src/components/grid-layout/cards/map/map-card.tsx
index 2fa8aac8af..86a991e1b1 100644
--- a/src/components/grid-layout/cards/map/map-card.tsx
+++ b/src/components/grid-layout/cards/map/map-card.tsx
@@ -4,12 +4,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Box, Dialog, Fab, Theme, useTheme } from '@mui/material';
+import { Box, Dialog, Fab, useTheme } from '@mui/material';
 import { forwardRef, MouseEventHandler, Ref, TouchEventHandler, useCallback, useRef, useState } from 'react';
 import CustomCardHeader from '../custom-card-header';
 import { UUID } from 'crypto';
 import AlertCustomMessageNode from 'components/utils/alert-custom-message-node';
-import { EquipmentType, LineFlowMode, mergeSx, useStateBoolean } from '@gridsuite/commons-ui';
+import { type EquipmentType, type LineFlowMode, mergeSx, type MuiStyles, useStateBoolean } from '@gridsuite/commons-ui';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
 import { resetMapEquipment, setMapDataLoading, setOpenMap, setReloadMapNeeded } from 'redux/actions';
@@ -20,12 +20,12 @@ import { Close } from '@mui/icons-material';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 const styles = {
-    closeButton: (theme: Theme) => ({
+    closeButton: (theme) => ({
         alignSelf: 'center',
         margin: theme.spacing(1),
         padding: theme.spacing(2),
     }),
-};
+} as const satisfies MuiStyles;
 
 interface ReactGridLayoutCustomChildComponentProps {
     style?: React.CSSProperties;
diff --git a/src/components/grid-layout/custom-resize-handle.tsx b/src/components/grid-layout/custom-resize-handle.tsx
index 002b6128ce..cb812b7a01 100644
--- a/src/components/grid-layout/custom-resize-handle.tsx
+++ b/src/components/grid-layout/custom-resize-handle.tsx
@@ -6,6 +6,7 @@
  */
 import { OpenInFull } from '@mui/icons-material';
 import { forwardRef, Ref } from 'react';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
 type CustomResizeHandleProps = {
@@ -17,7 +18,7 @@ const styles = {
         fontSize: 'medium',
         rotate: '90deg',
     },
-};
+} as const satisfies MuiStyles;
 
 const CustomResizeHandle = forwardRef((props: CustomResizeHandleProps, ref: Ref<HTMLDivElement>) => {
     const { handleAxis, ...restProps } = props;
diff --git a/src/components/grid-layout/grid-layout-panel.tsx b/src/components/grid-layout/grid-layout-panel.tsx
index ff051ea1af..07ba1a45fd 100644
--- a/src/components/grid-layout/grid-layout-panel.tsx
+++ b/src/components/grid-layout/grid-layout-panel.tsx
@@ -5,12 +5,19 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useState, useRef } from 'react';
-import { Layout, Layouts, ItemCallback, Responsive, WidthProvider } from 'react-grid-layout';
+import { useCallback, useRef, useState } from 'react';
+import { type ItemCallback, type Layout, type Layouts, Responsive, WidthProvider } from 'react-grid-layout';
 import { useDiagramModel } from './hooks/use-diagram-model';
 import { Diagram, DiagramParams, DiagramType } from './cards/diagrams/diagram.type';
 import { Box, useTheme } from '@mui/material';
-import { ElementType, EquipmentInfos, EquipmentType, useDebounce, useSnackMessage } from '@gridsuite/commons-ui';
+import {
+    ElementType,
+    type EquipmentInfos,
+    EquipmentType,
+    type MuiStyles,
+    useDebounce,
+    useSnackMessage,
+} from '@gridsuite/commons-ui';
 import { UUID } from 'crypto';
 import { useDiagramsGridLayoutInitialization } from './hooks/use-diagrams-grid-layout-initialization';
 import { v4 } from 'uuid';
@@ -29,7 +36,8 @@ const styles = {
         flexDirection: 'column',
         width: '100%',
     },
-};
+} as const satisfies MuiStyles;
+
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
 // Diagram types to manage here
diff --git a/src/components/grid-layout/grid-layout-toolbar.tsx b/src/components/grid-layout/grid-layout-toolbar.tsx
index 2c78a3302c..d6983efb4e 100644
--- a/src/components/grid-layout/grid-layout-toolbar.tsx
+++ b/src/components/grid-layout/grid-layout-toolbar.tsx
@@ -13,9 +13,10 @@ import { Search, Public, Upload } from '@mui/icons-material';
 import {
     DirectoryItemSelector,
     ElementType,
-    EquipmentInfos,
+    type EquipmentInfos,
+    type MuiStyles,
     OverflowableText,
-    TreeViewFinderNodeProps,
+    type TreeViewFinderNodeProps,
 } from '@gridsuite/commons-ui';
 import { TopBarEquipmentSearchDialog } from 'components/top-bar-equipment-seach-dialog/top-bar-equipment-search-dialog';
 import { EQUIPMENT_TYPES } from '../utils/equipment-types';
@@ -32,7 +33,7 @@ const styles = {
         alignItems: 'center',
         justifyContent: 'space-between',
     },
-};
+} as const satisfies MuiStyles;
 
 interface DiagramGridHeaderProps {
     onLoad: (elementUuid: UUID, elementType: ElementType, elementName: string) => void;
diff --git a/src/components/horizontal-toolbar.tsx b/src/components/horizontal-toolbar.tsx
index 301e5b4a4b..235df66601 100644
--- a/src/components/horizontal-toolbar.tsx
+++ b/src/components/horizontal-toolbar.tsx
@@ -16,18 +16,19 @@ import StudyPathBreadcrumbs from './breadcrumbs/study-path-breadcrumbs';
 import { STUDY_VIEWS, StudyView } from './utils/utils.js';
 import useStudyPath from '../hooks/use-study-path.js';
 import { AppState } from '../redux/reducer';
-import { Box, Grid, Theme, ToggleButtonGroup, ToggleButton, Tooltip } from '@mui/material';
-import { DeviceHubIcon, TuneIcon, PhotoLibraryIcon, OverflowableText } from '@gridsuite/commons-ui';
+import { Box, Grid, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { DeviceHubIcon, type MuiStyles, OverflowableText, PhotoLibraryIcon, TuneIcon } from '@gridsuite/commons-ui';
 import { useDisplayModes } from '../hooks/use-display-modes';
 import { useEffect } from 'react';
+
 const styles = {
-    horizontalToolbar: (theme: Theme) => ({
+    horizontalToolbar: (theme) => ({
         backgroundColor: theme.palette.toolbarBackground,
     }),
-    selected: (theme: Theme) => ({
+    selected: (theme) => ({
         color: theme.palette.action.active,
     }),
-    notSelected: (theme: Theme) => ({
+    notSelected: (theme) => ({
         color: theme.palette.action.disabled,
     }),
     tooltip: {
@@ -43,7 +44,7 @@ const styles = {
         alignItems: 'center',
         marginRight: '10px',
     },
-};
+} as const satisfies MuiStyles;
 
 export function HorizontalToolbar() {
     const intl = useIntl();
diff --git a/src/components/menus/base-equipment-menu.tsx b/src/components/menus/base-equipment-menu.tsx
index 22ac49150b..9fccb922d7 100644
--- a/src/components/menus/base-equipment-menu.tsx
+++ b/src/components/menus/base-equipment-menu.tsx
@@ -6,24 +6,23 @@
  */
 
 import EditIcon from '@mui/icons-material/Edit';
-
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import TableChartIcon from '@mui/icons-material/TableChart';
 import DeleteIcon from '@mui/icons-material/Delete';
-
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useNameOrId } from '../utils/equipmentInfosHandler';
 import { getCommonEquipmentType } from 'components/grid-layout/cards/diagrams/diagram-utils';
 import { isNodeReadOnly } from '../graph/util/model-functions';
 import {
-    Equipment,
-    EquipmentType,
     CustomMenuItem,
     CustomNestedMenuItem,
-    ExtendedEquipmentType,
+    type Equipment,
+    EquipmentType,
+    type ExtendedEquipmentType,
+    type MuiStyles,
 } from '@gridsuite/commons-ui';
 import { AppState } from 'redux/reducer';
 
@@ -34,7 +33,7 @@ const styles = {
         // to justify menu items texts
         paddingLeft: '12px',
     },
-};
+} as const satisfies MuiStyles;
 
 type HandleViewInSpreadsheet = (equipmentType: EquipmentType, equipmentId: string) => void;
 type HandleDeleteEquipment = (equipmentType: EquipmentType | null, equipmentId: string) => void;
diff --git a/src/components/menus/bus-menu.tsx b/src/components/menus/bus-menu.tsx
index 389a0f991b..8717384dff 100644
--- a/src/components/menus/bus-menu.tsx
+++ b/src/components/menus/bus-menu.tsx
@@ -22,7 +22,13 @@ import { useOptionalServiceStatus } from '../../hooks/use-optional-service-statu
 import { OptionalServicesNames, OptionalServicesStatus } from '../utils/optional-services';
 import OfflineBoltOutlinedIcon from '@mui/icons-material/OfflineBoltOutlined';
 import { tripEquipment } from '../../services/study/network-modifications';
-import { ComputingType, CustomMenuItem, EquipmentType, useSnackMessage } from '@gridsuite/commons-ui';
+import {
+    ComputingType,
+    CustomMenuItem,
+    type EquipmentType,
+    type MuiStyles,
+    useSnackMessage,
+} from '@gridsuite/commons-ui';
 import { fetchNetworkElementInfos } from '../../services/study/network';
 import { useParameterState } from 'components/dialogs/parameters/use-parameters-state';
 
@@ -51,7 +57,7 @@ const styles = {
         // to justify menu items texts
         paddingLeft: '12px',
     },
-};
+} as const satisfies MuiStyles;
 
 type EquipmentInfo = {
     id: string;
diff --git a/src/components/menus/dynamic-simulation/dynamic-simulation-event-menu-item.tsx b/src/components/menus/dynamic-simulation/dynamic-simulation-event-menu-item.tsx
index 5e53ce9e11..d53ef91b86 100644
--- a/src/components/menus/dynamic-simulation/dynamic-simulation-event-menu-item.tsx
+++ b/src/components/menus/dynamic-simulation/dynamic-simulation-event-menu-item.tsx
@@ -12,7 +12,7 @@ import OfflineBoltOutlinedIcon from '@mui/icons-material/OfflineBoltOutlined';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import { useIntl } from 'react-intl';
-import { EquipmentType, CustomMenuItem } from '@gridsuite/commons-ui';
+import { type EquipmentType, CustomMenuItem, type MuiStyles } from '@gridsuite/commons-ui';
 import { EQUIPMENT_TYPES } from 'components/utils/equipment-types';
 
 const styles = {
@@ -22,7 +22,7 @@ const styles = {
         // to justify menu items texts
         paddingLeft: '12px',
     },
-};
+} as const satisfies MuiStyles;
 
 interface DynamicSimulationEventMenuItemProps {
     equipmentId: string;
diff --git a/src/components/menus/equipment-menu.tsx b/src/components/menus/equipment-menu.tsx
index 428d60bc5c..6c673138eb 100644
--- a/src/components/menus/equipment-menu.tsx
+++ b/src/components/menus/equipment-menu.tsx
@@ -14,7 +14,7 @@ import { useIsAnyNodeBuilding } from '../utils/is-any-node-building-hook';
 import { isNodeBuilt, isNodeReadOnly } from '../graph/util/model-functions';
 import DynamicSimulationEventMenuItem from './dynamic-simulation/dynamic-simulation-event-menu-item';
 import { AppState } from 'redux/reducer';
-import { EquipmentType, ExtendedEquipmentType } from '@gridsuite/commons-ui';
+import { type EquipmentType, type ExtendedEquipmentType, type MuiStyles } from '@gridsuite/commons-ui';
 import { BaseEquipmentMenuProps } from './base-equipment-menu';
 import { MenuBranchProps } from './operating-status-menu';
 import { useParameterState } from 'components/dialogs/parameters/use-parameters-state';
@@ -25,7 +25,7 @@ const styles = {
         maxHeight: '800px',
         overflowY: 'visible',
     },
-};
+} as const satisfies MuiStyles;
 
 const withEquipmentMenu =
     (
diff --git a/src/components/menus/operating-status-menu.tsx b/src/components/menus/operating-status-menu.tsx
index 49863132a3..65f18915a8 100644
--- a/src/components/menus/operating-status-menu.tsx
+++ b/src/components/menus/operating-status-menu.tsx
@@ -7,7 +7,6 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import Menu from '@mui/material/Menu';
-
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -22,9 +21,10 @@ import { useIntl } from 'react-intl';
 import { useNameOrId } from '../utils/equipmentInfosHandler';
 import {
     CustomMenuItem,
-    EquipmentInfos,
+    type EquipmentInfos,
     EquipmentType,
-    ExtendedEquipmentType,
+    type ExtendedEquipmentType,
+    type MuiStyles,
     OperatingStatus,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
@@ -56,7 +56,8 @@ const styles = {
         // to justify menu items texts
         paddingLeft: '12px',
     },
-};
+} as const satisfies MuiStyles;
+
 export type MenuBranchProps = {
     equipment: MapEquipment;
     equipmentType: EquipmentType;
diff --git a/src/components/network/guidance-popup.tsx b/src/components/network/guidance-popup.tsx
index 3a5e9a4f2d..b527294e10 100644
--- a/src/components/network/guidance-popup.tsx
+++ b/src/components/network/guidance-popup.tsx
@@ -5,41 +5,40 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import CardContent from '@mui/material/CardContent';
-import Card from '@mui/material/Card';
-import { Button, CardActions, CardHeader, Theme, Typography } from '@mui/material';
+import { Button, Card, CardActions, CardContent, CardHeader, Typography } from '@mui/material';
 import LineSeparator from '../dialogs/commons/line-separator';
 import { FormattedMessage } from 'react-intl';
 import BackHandOutlinedIcon from '@mui/icons-material/BackHandOutlined';
 import KeyboardReturnOutlinedIcon from '@mui/icons-material/KeyboardReturnOutlined';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    popUpContent: (theme: Theme) => ({
+    popUpContent: (theme) => ({
         fontSize: 15,
         fontFamily: theme.typography.fontFamily,
     }),
-    symbol: (theme: Theme) => ({
+    symbol: (theme) => ({
         width: theme.spacing(2),
         height: theme.spacing(2),
     }),
-    title: (theme: Theme) => ({
+    title: (theme) => ({
         lineHeight: 1,
         maxWidth: theme.spacing(17.5),
     }),
-    card: (theme: Theme) => ({
+    card: (theme) => ({
         position: 'absolute',
         left: theme.spacing(1.25),
         bottom: theme.spacing(10.75),
         maxWidth: theme.spacing(25),
     }),
-    header: (theme: Theme) => ({
+    header: (theme) => ({
         paddingBottom: theme.spacing(1.4),
     }),
     actionsContainer: {
         display: 'flex',
         justifyContent: 'center',
     },
-};
+} as const satisfies MuiStyles;
 
 type GuidancePopupProps = {
     onActionClick: () => void;
diff --git a/src/components/network/network-map-panel.tsx b/src/components/network/network-map-panel.tsx
index b7f77e6b90..bf618c74fd 100644
--- a/src/components/network/network-map-panel.tsx
+++ b/src/components/network/network-map-panel.tsx
@@ -26,7 +26,7 @@ import {
     type NetworkMapProps,
     type NetworkMapRef,
 } from '@powsybl/network-viewer';
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, forwardRef } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { MapEquipment as BaseEquipment } from '../menus/base-equipment-menu';
 import VoltageLevelChoice from '../voltage-level-choice';
 import NominalVoltageFilter, { type NominalVoltageFilterProps } from './nominal-voltage-filter';
@@ -34,14 +34,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import { PARAM_USE_NAME } from '../../utils/config-params';
 import {
     ComputingType,
-    EquipmentInfos,
+    type EquipmentInfos,
     EquipmentType,
     ExtendedEquipmentType,
     HvdcType,
+    type MuiStyles,
     NotificationsUrlKeys,
     useNotificationsListener,
     useSnackMessage,
-    UseStateBooleanReturn,
+    type UseStateBooleanReturn,
 } from '@gridsuite/commons-ui';
 import { isNodeBuilt, isNodeEdited, isSameNodeAndBuilt } from '../graph/util/model-functions';
 import { openDiagram, resetMapEquipment, setMapDataLoading, setReloadMapNeeded } from '../../redux/actions';
@@ -111,7 +112,7 @@ const styles = {
             backgroundColor: '#f2f2f2',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 const NODE_CHANGED_ERROR = 'Node has changed or is not built anymore. The Promise is rejected.';
 
diff --git a/src/components/network/nominal-voltage-filter.tsx b/src/components/network/nominal-voltage-filter.tsx
index 6d10c54dff..8a638f0ac4 100644
--- a/src/components/network/nominal-voltage-filter.tsx
+++ b/src/components/network/nominal-voltage-filter.tsx
@@ -8,6 +8,7 @@
 import { useCallback, useMemo } from 'react';
 import { Button, Checkbox, List, ListItem, ListItemButton, ListItemText, Paper } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     nominalVoltageZone: {
@@ -35,7 +36,7 @@ const styles = {
             textDecoration: 'underline',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 export type NominalVoltageFilterProps = {
     nominalVoltages: number[];
diff --git a/src/components/report-viewer/QuickSearch.tsx b/src/components/report-viewer/QuickSearch.tsx
index 83da33d905..0c9db87102 100644
--- a/src/components/report-viewer/QuickSearch.tsx
+++ b/src/components/report-viewer/QuickSearch.tsx
@@ -4,11 +4,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { useState, useCallback, RefObject } from 'react';
-import { TextField, InputAdornment, IconButton, Box, SxProps } from '@mui/material';
-import { Clear, KeyboardArrowUp, KeyboardArrowDown } from '@mui/icons-material';
+import { RefObject, useCallback, useState } from 'react';
+import { Box, IconButton, InputAdornment, TextField } from '@mui/material';
+import { Clear, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
 import { useIntl } from 'react-intl';
-import { useDebounce } from '@gridsuite/commons-ui';
+import { type MuiStyles, type SxStyle, useDebounce } from '@gridsuite/commons-ui';
 
 interface QuickSearchProps {
     currentResultIndex: number;
@@ -18,14 +18,14 @@ interface QuickSearchProps {
     resetSearch: () => void;
     placeholder?: string;
     inputRef: RefObject<HTMLDivElement>;
-    sx?: SxProps;
+    sx?: SxStyle;
 }
 
 const styles = {
     adornmentItem: {
         padding: '2px',
     },
-};
+} as const satisfies MuiStyles;
 
 export const QuickSearch: React.FC<QuickSearchProps> = ({
     currentResultIndex,
diff --git a/src/components/report-viewer/log-table.tsx b/src/components/report-viewer/log-table.tsx
index 4b3c053d33..448bf6e923 100644
--- a/src/components/report-viewer/log-table.tsx
+++ b/src/components/report-viewer/log-table.tsx
@@ -6,7 +6,7 @@
  */
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { CustomAGGrid } from '@gridsuite/commons-ui';
+import { CustomAGGrid, type MuiStyles, type SxStyle } from '@gridsuite/commons-ui';
 import { alpha, useTheme } from '@mui/material/styles';
 import { setLogsFilter } from '../../redux/actions';
 import { makeAgGridCustomHeaderColumn } from 'components/custom-aggrid/utils/custom-aggrid-header-utils';
@@ -45,8 +45,8 @@ const getColumnFilterValue = (array: FilterConfig[] | null, columnName: string):
     return array?.find((item) => item.column === columnName)?.value ?? null;
 };
 
-const styles = {
-    chip: (severity: string, severityFilter: string[], theme: Theme) => ({
+const chipStyle = (severity: string, severityFilter: string[], theme: Theme) =>
+    ({
         backgroundColor: severityFilter.includes(severity)
             ? REPORT_SEVERITY[severity as keyof typeof REPORT_SEVERITY].colorHexCode
             : theme.severityChip.disabledColor,
@@ -63,23 +63,21 @@ const styles = {
             color: theme.palette.text.primary,
         },
         padding: 0.5,
+    }) as const satisfies SxStyle;
+
+const styles = {
+    chipContainer: (theme) => ({
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: theme.spacing(1),
     }),
-    chipContainer: (theme: Theme) => {
-        return {
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: theme.spacing(1),
-        };
-    },
-    toolContainer: (theme: Theme) => {
-        return {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: theme.spacing(1),
-            mb: theme.spacing(2),
-        };
-    },
-};
+    toolContainer: (theme) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(1),
+        mb: theme.spacing(2),
+    }),
+} as const satisfies MuiStyles;
 
 const SEVERITY_COLUMN_FIXED_WIDTH = 115;
 const PAGE_OPTIONS = [15, 30, 50, 100];
@@ -433,7 +431,7 @@ const LogTable = ({
                             deleteIcon={severityFilter.includes(severity) ? <VisibilityIcon /> : <VisibilityOffIcon />}
                             onClick={() => handleChipClick(severity)}
                             onDelete={() => handleChipClick(severity)}
-                            sx={styles.chip(severity, severityFilter, theme)}
+                            sx={chipStyle(severity, severityFilter, theme) /*TODO memoize that*/}
                         />
                     ))}
                 </Box>
diff --git a/src/components/report-viewer/report-viewer.tsx b/src/components/report-viewer/report-viewer.tsx
index 9ac5e4f18e..66a10d991b 100644
--- a/src/components/report-viewer/report-viewer.tsx
+++ b/src/components/report-viewer/report-viewer.tsx
@@ -21,15 +21,16 @@ import {
 import { GLOBAL_REPORT_NODE_LABEL } from '../../utils/report/report.constant';
 import { ImperativePanelGroupHandle, Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-import { Box, Theme } from '@mui/material';
+import { Box } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    panelHandlerContainer: (theme: Theme) => ({
+    panelHandlerContainer: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         borderRight: `1px solid ${theme.palette.divider}`,
     }),
-};
+} as const satisfies MuiStyles;
 
 type ReportViewerProps = {
     report: Report;
diff --git a/src/components/report-viewer/report.styles.ts b/src/components/report-viewer/report.styles.ts
index 8138438d55..55f8e98826 100644
--- a/src/components/report-viewer/report.styles.ts
+++ b/src/components/report-viewer/report.styles.ts
@@ -4,10 +4,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { Theme } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 export const reportStyles = {
-    mainContainer: (theme: Theme) => {
+    mainContainer: (theme) => {
         return {
             display: 'flex',
             flexDirection: 'column',
@@ -16,4 +16,4 @@ export const reportStyles = {
             p: theme.spacing(1),
         };
     },
-};
+} as const satisfies MuiStyles;
diff --git a/src/components/report-viewer/treeview-item.tsx b/src/components/report-viewer/treeview-item.tsx
index a71d55bd38..2932151a92 100644
--- a/src/components/report-viewer/treeview-item.tsx
+++ b/src/components/report-viewer/treeview-item.tsx
@@ -4,10 +4,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { CSSProperties, FunctionComponent, ReactNode, useCallback, useMemo } from 'react';
-import { Box, Stack, Typography, styled, Theme, useTheme } from '@mui/material';
 import * as React from 'react';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { CSSProperties, FunctionComponent, ReactNode, useCallback, useMemo } from 'react';
+import { Box, Stack, styled, Typography, useTheme } from '@mui/material';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { ListChildComponentProps } from 'react-window';
@@ -24,31 +24,31 @@ export interface ReportItem {
 }
 
 const styles = {
-    content: (theme: Theme) => ({
+    content: (theme) => ({
         color: theme.palette.text.secondary,
         borderRadius: theme.spacing(2),
         width: 'fit-content',
         paddingRight: theme.spacing(1),
         fontWeight: theme.typography.fontWeightMedium,
     }),
-    labelText: (theme: Theme) => ({
+    labelText: (theme) => ({
         fontWeight: 'inherit',
         marginRight: theme.spacing(2),
     }),
-    labelRoot: (theme: Theme) => ({
+    labelRoot: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         padding: theme.spacing(0.5, 0),
     }),
-    root: (theme: Theme) => ({
+    root: (theme) => ({
         '&:hover': {
             backgroundColor: theme.palette.action.hover,
         },
     }),
-    highlighted: (theme: Theme) => ({
+    highlighted: (theme) => ({
         backgroundColor: theme.palette.action.hover,
     }),
-};
+} as const satisfies MuiStyles;
 
 const TreeViewItemBox = styled(Box)(() => {
     return {
diff --git a/src/components/report-viewer/virtualized-treeview.tsx b/src/components/report-viewer/virtualized-treeview.tsx
index 171f9e2fdd..4cb77aab4b 100644
--- a/src/components/report-viewer/virtualized-treeview.tsx
+++ b/src/components/report-viewer/virtualized-treeview.tsx
@@ -11,18 +11,19 @@ import { ReportTree } from '../../utils/report/report.type';
 import Label from '@mui/icons-material/Label';
 import { useTreeViewScroll } from './use-treeview-scroll';
 import { QuickSearch } from './QuickSearch';
-import { Box, Theme } from '@mui/material';
+import { Box } from '@mui/material';
 import AutoSizer from 'react-virtualized-auto-sizer';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { reportStyles } from './report.styles';
 
 const styles = {
     treeItem: {
         whiteSpace: 'nowrap',
     },
-    labelIcon: (theme: Theme) => ({
+    labelIcon: (theme) => ({
         marginRight: theme.spacing(1),
     }),
-};
+} as const satisfies MuiStyles;
 
 export interface TreeViewProps {
     expandedTreeReports: string[];
diff --git a/src/components/result-view-tab.tsx b/src/components/result-view-tab.tsx
index 4a329b4aae..8427922683 100644
--- a/src/components/result-view-tab.tsx
+++ b/src/components/result-view-tab.tsx
@@ -26,7 +26,7 @@ import { useSelector } from 'react-redux';
 import { Box, Paper, Tab, Tabs } from '@mui/material';
 import { StateEstimationResultTab } from './results/stateestimation/state-estimation-result-tab';
 import DynamicSecurityAnalysisResultTab from './results/dynamic-security-analysis/dynamic-security-analysis-result-tab';
-import { usePrevious, ComputingType } from '@gridsuite/commons-ui';
+import { ComputingType, type MuiStyles, usePrevious } from '@gridsuite/commons-ui';
 import { useParameterState } from './dialogs/parameters/use-parameters-state';
 import { IService } from './result-view-tab.type';
 import { CurrentTreeNode } from './graph/tree-node.type';
@@ -43,7 +43,7 @@ const styles = {
         flexDirection: 'column',
         flexGrow: 1,
     },
-};
+} as const satisfies MuiStyles;
 
 interface IResultViewTabProps {
     studyUuid: UUID;
diff --git a/src/components/results/common/Overlay.tsx b/src/components/results/common/Overlay.tsx
index 6ae9fd650e..26406ee45d 100644
--- a/src/components/results/common/Overlay.tsx
+++ b/src/components/results/common/Overlay.tsx
@@ -6,6 +6,7 @@
  */
 import { ReactNode } from 'react';
 import { Box, Typography } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     overlay: {
@@ -14,7 +15,7 @@ const styles = {
         alignItems: 'center',
         justifyContent: 'center',
     },
-};
+} as const satisfies MuiStyles;
 
 export interface OverlayProps {
     children: ReactNode;
diff --git a/src/components/results/common/glass-pane.tsx b/src/components/results/common/glass-pane.tsx
index c8f88970ce..c73ed79116 100644
--- a/src/components/results/common/glass-pane.tsx
+++ b/src/components/results/common/glass-pane.tsx
@@ -9,6 +9,7 @@ import { ReactNode } from 'react';
 import { Box, CircularProgress } from '@mui/material';
 import { FunctionComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     glassPane: {
@@ -24,7 +25,7 @@ const styles = {
         justifyContent: 'center',
         gap: 1,
     },
-};
+} as const satisfies MuiStyles;
 
 interface GlassPaneProps {
     active: boolean;
diff --git a/src/components/results/common/global-filter/global-filter-styles.ts b/src/components/results/common/global-filter/global-filter-styles.ts
index c1d89aabc0..c619440d68 100644
--- a/src/components/results/common/global-filter/global-filter-styles.ts
+++ b/src/components/results/common/global-filter/global-filter-styles.ts
@@ -5,10 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Theme } from '@mui/material';
 import { cyan } from '@mui/material/colors';
 import { FilterType } from '../utils';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 
 export const getResultsGlobalFiltersChipStyle = (filterType: string) => {
     let chipStyle;
@@ -35,7 +34,7 @@ export const GLOBAL_FILTERS_CELL_HEIGHT: number = 400;
 export const IMPORT_FILTER_HEIGHT: number = 40;
 
 export const resultsGlobalFilterStyles = {
-    autocomplete: (theme: Theme) => ({
+    autocomplete: (theme) => ({
         width: AUTOCOMPLETE_WIDTH + 'px',
         '.MuiAutocomplete-inputRoot': {
             height: '40px',
@@ -57,23 +56,23 @@ export const resultsGlobalFilterStyles = {
         },
     }),
     // from the expanded part :
-    dropdown: () => ({
+    dropdown: {
         position: 'relative',
         left: `0px`,
         width: `${AUTOCOMPLETE_WIDTH + POPPER_EXTRA_WIDTH}px`,
-    }),
-    cellHeader: (theme: Theme) => ({
+    },
+    cellHeader: (theme) => ({
         color: theme.palette.text.secondary,
         fontSize: '1em',
         padding: 1,
         border: '1px solid',
         borderColor: theme.palette.divider,
     }),
-    cell: (theme: Theme) => ({
+    cell: (theme) => ({
         borderLeft: '1px solid',
         borderColor: theme.palette.divider,
     }),
-    list: (theme: Theme) => ({
+    list: (theme) => ({
         display: 'flex',
         flexDirection: 'column',
         color: theme.palette.text.secondary,
@@ -81,7 +80,7 @@ export const resultsGlobalFilterStyles = {
         width: '100%',
         maxHeight: `${GLOBAL_FILTERS_CELL_HEIGHT}px`,
     }),
-    importFilterButton: (theme: Theme) => ({
+    importFilterButton: (theme) => ({
         color: theme.palette.text.secondary,
         fontSize: '0.8em',
         borderTop: '1px solid',
@@ -90,7 +89,7 @@ export const resultsGlobalFilterStyles = {
         justifyContent: 'flex-start',
         paddingLeft: '24px',
     }),
-    miniButton: (theme: Theme) => ({
+    miniButton: (theme) => ({
         color: theme.palette.text.primary,
         border: '1px solid',
         borderColor: theme.palette.text.primary,
@@ -122,7 +121,7 @@ export const resultsGlobalFilterStyles = {
             position: 'relative',
         },
     },
-    chipCountry: (theme: Theme) => ({
+    chipCountry: (theme) => ({
         '&.MuiChip-root, &.MuiChip-root[aria-selected="true"]': {
             backgroundColor: `${theme.palette.info.main}!important`,
         },
@@ -130,7 +129,7 @@ export const resultsGlobalFilterStyles = {
             backgroundColor: `${theme.palette.info.dark}!important`,
         },
     }),
-    chipVoltageLevel: (theme: Theme) => ({
+    chipVoltageLevel: (theme) => ({
         '&.MuiChip-root, &.MuiChip-root[aria-selected="true"]': {
             backgroundColor: `${theme.palette.secondary.main}!important`,
         },
@@ -138,15 +137,15 @@ export const resultsGlobalFilterStyles = {
             backgroundColor: `${theme.palette.secondary.dark}!important`,
         },
     }),
-    chipGenericFilter: () => ({
+    chipGenericFilter: {
         '&.MuiChip-root, &.MuiChip-root[aria-selected="true"]': {
             backgroundColor: `${cyan['500']}!important`,
         },
         '&.MuiChip-root:hover, &.MuiChip-root:focus': {
             backgroundColor: `${cyan['700']}!important`,
         },
-    }),
-    chipSubstationProperty: (theme: Theme) => ({
+    },
+    chipSubstationProperty: (theme) => ({
         '&.MuiChip-root, &.MuiChip-root[aria-selected="true"]': {
             backgroundColor: `${theme.palette.success.main}!important`,
         },
@@ -154,4 +153,4 @@ export const resultsGlobalFilterStyles = {
             backgroundColor: `${theme.palette.success.dark}!important`,
         },
     }),
-};
+} as const satisfies MuiStyles;
diff --git a/src/components/results/common/result-cell-renderers.tsx b/src/components/results/common/result-cell-renderers.tsx
index d6b6934fd3..cfa5ef880f 100644
--- a/src/components/results/common/result-cell-renderers.tsx
+++ b/src/components/results/common/result-cell-renderers.tsx
@@ -8,6 +8,7 @@ import { green, red } from '@mui/material/colors';
 import { Box } from '@mui/material';
 import { Lens } from '@mui/icons-material';
 import { ICellRendererParams } from 'ag-grid-community';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     cell: {
@@ -24,7 +25,7 @@ const styles = {
     fail: {
         color: red[500],
     },
-};
+} as const satisfies MuiStyles;
 
 export const COL_STATUS = 'status';
 
diff --git a/src/components/results/common/tab-panel-lazy.tsx b/src/components/results/common/tab-panel-lazy.tsx
index 89b79386d4..2c50f43459 100644
--- a/src/components/results/common/tab-panel-lazy.tsx
+++ b/src/components/results/common/tab-panel-lazy.tsx
@@ -8,13 +8,13 @@
 import { useEffect, useState } from 'react';
 import { Box } from '@mui/material';
 import { BoxProps } from '@mui/material/Box/Box';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     fullHeight: {
         height: '100%',
     },
-};
+} as const satisfies MuiStyles;
 
 export type TabPanelLazyProps = BoxProps & {
     selected?: boolean;
diff --git a/src/components/results/common/utils.ts b/src/components/results/common/utils.ts
index 3d7ec55ed2..2a8492c2ff 100644
--- a/src/components/results/common/utils.ts
+++ b/src/components/results/common/utils.ts
@@ -6,6 +6,7 @@
  */
 import { NA_Value } from 'components/custom-aggrid/utils/format-values-utils';
 import { IntlShape } from 'react-intl';
+import type { MuiStyles } from '@gridsuite/commons-ui';
 
 export const PERMANENT_LIMIT_NAME = 'permanent';
 
@@ -42,4 +43,4 @@ export const resultsStyles = {
     sldLink: {
         color: 'node.background',
     },
-};
+} as const satisfies MuiStyles;
diff --git a/src/components/results/dynamic-security-analysis/dynamic-security-analysis-result-synthesis.tsx b/src/components/results/dynamic-security-analysis/dynamic-security-analysis-result-synthesis.tsx
index bbcdc9ea4a..e0f62e6506 100644
--- a/src/components/results/dynamic-security-analysis/dynamic-security-analysis-result-synthesis.tsx
+++ b/src/components/results/dynamic-security-analysis/dynamic-security-analysis-result-synthesis.tsx
@@ -15,7 +15,7 @@ import { DefaultCellRenderer } from '../../custom-aggrid/cell-renderers';
 import { COL_STATUS, StatusCellRender } from '../common/result-cell-renderers';
 import { UUID } from 'crypto';
 import { AppState } from '../../../redux/reducer';
-import { CustomAGGrid, ComputingType } from '@gridsuite/commons-ui';
+import { CustomAGGrid, ComputingType, type MuiStyles } from '@gridsuite/commons-ui';
 import { fetchDynamicSecurityAnalysisStatus } from '../../../services/study/dynamic-security-analysis';
 import { MEDIUM_COLUMN_WIDTH } from '../dynamicsimulation/utils/dynamic-simulation-result-utils';
 import { dynamicSecurityAnalysisResultInvalidations } from '../../computing-status/use-all-computing-status';
@@ -26,7 +26,7 @@ const styles = {
     loader: {
         height: '4px',
     },
-};
+} as const satisfies MuiStyles;
 
 const defaultColDef = {
     filter: true,
diff --git a/src/components/results/dynamic-security-analysis/dynamic-security-analysis-result-tab.tsx b/src/components/results/dynamic-security-analysis/dynamic-security-analysis-result-tab.tsx
index d990b64b5b..fca4bcb36c 100644
--- a/src/components/results/dynamic-security-analysis/dynamic-security-analysis-result-tab.tsx
+++ b/src/components/results/dynamic-security-analysis/dynamic-security-analysis-result-tab.tsx
@@ -10,6 +10,7 @@ import { Box, Tab, Tabs } from '@mui/material';
 import { useIntl } from 'react-intl';
 import TabPanelLazy from '../common/tab-panel-lazy';
 import { UUID } from 'crypto';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import DynamicSecurityAnalysisResultSynthesis from './dynamic-security-analysis-result-synthesis';
 import DynamicSecurityAnalysisResultLogs from './dynamic-security-analysis-result-logs';
 
@@ -17,7 +18,7 @@ const styles = {
     resultContainer: {
         flexGrow: 1,
     },
-};
+} as const satisfies MuiStyles;
 
 const TAB_INDEX_STATUS = 'DynamicSecurityAnalysisTabStatus';
 const TAB_INDEX_LOGS = 'ComputationResultsLogs';
diff --git a/src/components/results/dynamicsimulation/dynamic-simulation-result-synthesis.tsx b/src/components/results/dynamicsimulation/dynamic-simulation-result-synthesis.tsx
index 2afcc8c467..58bfc9e96b 100644
--- a/src/components/results/dynamicsimulation/dynamic-simulation-result-synthesis.tsx
+++ b/src/components/results/dynamicsimulation/dynamic-simulation-result-synthesis.tsx
@@ -17,7 +17,7 @@ import { DefaultCellRenderer } from '../../custom-aggrid/cell-renderers';
 import { COL_STATUS, StatusCellRender } from '../common/result-cell-renderers';
 import { UUID } from 'crypto';
 import { AppState } from '../../../redux/reducer';
-import { CustomAGGrid, ComputingType } from '@gridsuite/commons-ui';
+import { CustomAGGrid, ComputingType, type MuiStyles } from '@gridsuite/commons-ui';
 import { dynamicSimulationResultInvalidations } from '../../computing-status/use-all-computing-status';
 import { useNodeData } from 'components/use-node-data';
 import { AGGRID_LOCALES } from '../../../translations/not-intl/aggrid-locales';
@@ -26,7 +26,7 @@ const styles = {
     loader: {
         height: '4px',
     },
-};
+} as const satisfies MuiStyles;
 
 const defaultColDef = {
     filter: true,
diff --git a/src/components/results/dynamicsimulation/dynamic-simulation-result-tab.tsx b/src/components/results/dynamicsimulation/dynamic-simulation-result-tab.tsx
index 462bab8a8b..37dbc61abf 100644
--- a/src/components/results/dynamicsimulation/dynamic-simulation-result-tab.tsx
+++ b/src/components/results/dynamicsimulation/dynamic-simulation-result-tab.tsx
@@ -14,12 +14,13 @@ import DynamicSimulationResultSynthesis from './dynamic-simulation-result-synthe
 import DynamicSimulationResultTimeline from './dynamic-simulation-result-timeline';
 import DynamicSimulationResultLogs from './dynamic-simulation-result-logs';
 import { UUID } from 'crypto';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     resultContainer: {
         flexGrow: 1,
     },
-};
+} as const satisfies MuiStyles;
 
 const TAB_INDEX_TIME_SERIES = 'DynamicSimulationTabTimeSeries';
 const TAB_INDEX_TIMELINE = 'DynamicSimulationTabTimeline';
diff --git a/src/components/results/dynamicsimulation/dynamic-simulation-result-time-series.tsx b/src/components/results/dynamicsimulation/dynamic-simulation-result-time-series.tsx
index a2052097d1..ffaaaf4f77 100644
--- a/src/components/results/dynamicsimulation/dynamic-simulation-result-time-series.tsx
+++ b/src/components/results/dynamicsimulation/dynamic-simulation-result-time-series.tsx
@@ -7,7 +7,7 @@
 
 import CloseIcon from '@mui/icons-material/Close';
 import AddIcon from '@mui/icons-material/Add';
-import { Box, Grid, LinearProgress, Theme } from '@mui/material';
+import { Box, Grid, LinearProgress } from '@mui/material';
 import DynamicSimulationResultChart from './timeseries/dynamic-simulation-result-chart';
 import { memo, SyntheticEvent, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -17,7 +17,7 @@ import VisibilityBox from './common/visibility-box';
 import TooltipIconButton from '../../common/tooltip-icon-button';
 import useResultTimeSeries from './hooks/useResultTimeSeries';
 import { useSelector } from 'react-redux';
-import { ComputingType } from '@gridsuite/commons-ui';
+import { ComputingType, type MuiStyles } from '@gridsuite/commons-ui';
 import { getNoRowsMessage, useIntlResultStatusMessages } from '../../utils/aggrid-rows-handler';
 import Overlay from '../common/Overlay';
 import { UUID } from 'crypto';
@@ -29,7 +29,7 @@ const styles = {
         height: '100%',
         maxWidth: '100vw',
     },
-    addButton: (theme: Theme) => ({
+    addButton: (theme) => ({
         borderRadius: '50%',
         marginRight: theme.spacing(2),
         color: theme.palette.primary.main,
@@ -37,7 +37,7 @@ const styles = {
     loader: {
         height: '4px',
     },
-};
+} as const satisfies MuiStyles;
 
 export type DynamicSimulationResultTimeSeriesProps = {
     studyUuid: UUID;
diff --git a/src/components/results/dynamicsimulation/dynamic-simulation-result-timeline.tsx b/src/components/results/dynamicsimulation/dynamic-simulation-result-timeline.tsx
index dbd9f030d1..4233bb27a7 100644
--- a/src/components/results/dynamicsimulation/dynamic-simulation-result-timeline.tsx
+++ b/src/components/results/dynamicsimulation/dynamic-simulation-result-timeline.tsx
@@ -14,12 +14,11 @@ import { getNoRowsMessage, useIntlResultStatusMessages } from '../../utils/aggri
 import { useSelector } from 'react-redux';
 import { AppState } from '../../../redux/reducer';
 import { updateFilters } from '../../custom-aggrid/custom-aggrid-filters/utils/aggrid-filters-utils';
-
 import { TimelineEventKeyType } from './types/dynamic-simulation-result.type';
 import { LARGE_COLUMN_WIDTH, MEDIUM_COLUMN_WIDTH, MIN_COLUMN_WIDTH } from './utils/dynamic-simulation-result-utils';
 import { NumberCellRenderer } from '../common/result-cell-renderers';
 import { DYNAMIC_SIMULATION_RESULT_SORT_STORE, TIMELINE } from 'utils/store-sort-filter-fields';
-import { CustomAGGrid, ComputingType } from '@gridsuite/commons-ui';
+import { CustomAGGrid, ComputingType, type MuiStyles } from '@gridsuite/commons-ui';
 import { CustomAggridComparatorFilter } from '../../custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-filter';
 import { AgGridReact } from 'ag-grid-react';
 import { FilterType } from '../../../types/custom-aggrid-types';
@@ -37,7 +36,7 @@ const styles = {
     loader: {
         height: '4px',
     },
-};
+} as const satisfies MuiStyles;
 
 const COL_TIME: TimelineEventKeyType = 'time';
 const COL_MODEL_NAME: TimelineEventKeyType = 'modelName';
diff --git a/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-chart.tsx b/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-chart.tsx
index 68048ef571..57eb9092dc 100644
--- a/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-chart.tsx
+++ b/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-chart.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Box, Grid, Paper, TextField, Theme, ToggleButton, Tooltip, Typography } from '@mui/material';
+import { Box, Grid, Paper, TextField, ToggleButton, Tooltip, Typography } from '@mui/material';
 import DynamicSimulationResultSeriesList from './dynamic-simulation-result-series-list';
 import { ChangeEvent, memo, useCallback, useMemo, useRef, useState } from 'react';
 import DynamicSimulationResultSeriesChart from './dynamic-simulation-result-series-chart';
@@ -20,7 +20,7 @@ import FitScreenSharpIcon from '@mui/icons-material/FitScreenSharp';
 import FullscreenExitSharpIcon from '@mui/icons-material/FullscreenExitSharp';
 import ResponsiveGridLayout from '../common/gridlayout/responsive-grid-layout';
 import { lighten } from '@mui/material/styles';
-import { mergeSx, useDebounce } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles, useDebounce } from '@gridsuite/commons-ui';
 import { arrayFrom } from '../../../utils/utils';
 import { GridLayout, Plot, Series } from '../plot/plot-types';
 import { Layout, Layouts } from 'react-grid-layout';
@@ -33,7 +33,7 @@ const styles = {
         width: '100%',
         height: '100%',
     },
-    modal: (theme: Theme) => ({
+    modal: (theme) => ({
         position: 'fixed',
         top: 0,
         left: 0,
@@ -41,7 +41,7 @@ const styles = {
         zIndex: 1,
         background: lighten(theme.palette.background.paper, 0.05),
     }),
-    gridLayout: (theme: Theme) => ({
+    gridLayout: (theme) => ({
         paddingRight: theme.spacing(0.5),
         overflowY: 'auto',
         overflowX: 'hidden',
@@ -50,15 +50,15 @@ const styles = {
     menuCloseButton: {
         transform: 'scaleX(-1)',
     },
-    fullViewButton: (theme: Theme) => ({
+    fullViewButton: (theme) => ({
         marginRight: theme.spacing(2),
     }),
-    addButton: (theme: Theme) => ({
+    addButton: (theme) => ({
         borderRadius: '50%',
         marginRight: theme.spacing(10),
         color: theme.palette.primary.main,
     }),
-    paperOptionsGroup: (theme: Theme) => ({
+    paperOptionsGroup: (theme) => ({
         marginLeft: theme.spacing(2),
         marginRight: theme.spacing(2),
         display: 'flex',
@@ -67,17 +67,17 @@ const styles = {
         justifyContent: 'center',
         alignItems: 'center',
     }),
-    toolBar: (theme: Theme) => ({
+    toolBar: (theme) => ({
         marginTop: theme.spacing(1),
         marginBottom: theme.spacing(1),
     }),
-    numColumnsLabel: (theme: Theme) => ({
+    numColumnsLabel: (theme) => ({
         marginLeft: theme.spacing(2),
     }),
-    numColumnsInput: (theme: Theme) => ({
+    numColumnsInput: (theme) => ({
         marginLeft: theme.spacing(1),
     }),
-};
+} as const satisfies MuiStyles;
 
 function getTimeseriesIndexes(metadata: TimeSeriesMetadata): number[] {
     if (metadata?.irregularIndex) {
diff --git a/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-series-chart.tsx b/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-series-chart.tsx
index 41842d4da5..f38815125d 100644
--- a/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-series-chart.tsx
+++ b/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-series-chart.tsx
@@ -9,28 +9,28 @@ import CloseIcon from '@mui/icons-material/Close';
 import FitScreenSharpIcon from '@mui/icons-material/FitScreenSharp';
 import FullscreenExitSharpIcon from '@mui/icons-material/FullscreenExitSharp';
 import PlotlySeriesChart from '../plot/plotly-series-chart';
-import { Card, CardContent, CardHeader, Theme, Typography } from '@mui/material';
+import { Card, CardContent, CardHeader, Typography } from '@mui/material';
 import { memo, useCallback, useState } from 'react';
 import TooltipIconButton from '../../../common/tooltip-icon-button';
 import { lighten } from '@mui/material/styles';
 import { useIntl } from 'react-intl';
 import { Series } from '../plot/plot-types';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    cardActionButton: (theme: Theme) => ({
+    cardActionButton: (theme) => ({
         marginRight: theme.spacing(0.5),
         border: 'none',
         borderRadius: '50%',
     }),
-    cardActive: (theme: Theme) => ({
+    cardActive: (theme) => ({
         border: 'solid',
         borderColor: lighten(theme.palette.primary.main, 0.2),
     }),
     card: {
         height: '100%',
     },
-    cardHeader: (theme: Theme) => ({
+    cardHeader: (theme) => ({
         backgroundColor: lighten(theme.palette.background.paper, 0.2),
         '&:hover': {
             background: lighten(theme.palette.background.paper, 0.3),
@@ -42,7 +42,7 @@ const styles = {
     cardContent: {
         height: '100%',
     },
-};
+} as const satisfies MuiStyles;
 
 export type DynamicSimulationResultSeriesChartProps = {
     id: string;
diff --git a/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-series-list.tsx b/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-series-list.tsx
index 93c9541a07..767a3dd677 100644
--- a/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-series-list.tsx
+++ b/src/components/results/dynamicsimulation/timeseries/dynamic-simulation-result-series-list.tsx
@@ -5,9 +5,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid, List, ListSubheader, Theme, Typography } from '@mui/material';
+import { Grid, List, ListSubheader, Typography } from '@mui/material';
 import { Dispatch, memo, SetStateAction, useCallback, useEffect, useState } from 'react';
 import DynamicSimulationResultSeriesItem from './dynamic-simulation-result-series-item';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     root: {
@@ -15,11 +16,11 @@ const styles = {
         height: '100%',
         overflow: 'auto',
     },
-    headerItem: (theme: Theme) => ({
+    headerItem: (theme) => ({
         textAlign: 'center',
         background: theme.palette.background.paper,
     }),
-};
+} as const satisfies MuiStyles;
 
 export type DynamicSimulationResultSeriesListProps = {
     index: number;
diff --git a/src/components/results/loadflow/load-flow-result-tab.tsx b/src/components/results/loadflow/load-flow-result-tab.tsx
index bee122da85..f667c565c2 100644
--- a/src/components/results/loadflow/load-flow-result-tab.tsx
+++ b/src/components/results/loadflow/load-flow-result-tab.tsx
@@ -30,7 +30,7 @@ import {
 } from './load-flow-result-utils';
 import { LimitViolationResult } from './limit-violation-result';
 import { NumberCellRenderer, StatusCellRender } from '../common/result-cell-renderers';
-import { ComputingType, mergeSx } from '@gridsuite/commons-ui';
+import { ComputingType, mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import { LOADFLOW_RESULT_SORT_STORE } from 'utils/store-sort-filter-fields';
 import GlassPane from '../common/glass-pane';
 import { FilterType as AgGridFilterType } from '../../../types/custom-aggrid-types';
@@ -64,7 +64,7 @@ const styles = {
     emptySpace: {
         flexGrow: 1,
     },
-};
+} as const satisfies MuiStyles;
 
 export const LoadFlowResultTab: FunctionComponent<LoadFlowTabProps> = ({
     studyUuid,
diff --git a/src/components/results/securityanalysis/security-analysis-result-nmk.tsx b/src/components/results/securityanalysis/security-analysis-result-nmk.tsx
index af1a90ae4d..b41eb41da0 100644
--- a/src/components/results/securityanalysis/security-analysis-result-nmk.tsx
+++ b/src/components/results/securityanalysis/security-analysis-result-nmk.tsx
@@ -21,6 +21,7 @@ import {
 import { SecurityAnalysisTable } from './security-analysis-table';
 import { RowClassParams } from 'ag-grid-community';
 import { Box, useTheme } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import CustomTablePagination from '../../utils/custom-table-pagination';
 
 const styles = {
@@ -29,7 +30,7 @@ const styles = {
         flexDirection: 'column',
         height: '100%',
     },
-};
+} as const satisfies MuiStyles;
 
 export const SecurityAnalysisResultNmk: FunctionComponent<SecurityAnalysisResultNmkProps> = ({
     result,
diff --git a/src/components/results/securityanalysis/security-analysis-result-tab.tsx b/src/components/results/securityanalysis/security-analysis-result-tab.tsx
index 5c3cb7a8af..2f57940f50 100644
--- a/src/components/results/securityanalysis/security-analysis-result-tab.tsx
+++ b/src/components/results/securityanalysis/security-analysis-result-tab.tsx
@@ -9,13 +9,12 @@ import { FunctionComponent, SyntheticEvent, useCallback, useEffect, useMemo, use
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { AppState } from '../../../redux/reducer';
-
 import { Box, LinearProgress, MenuItem, Select, Tab, Tabs } from '@mui/material';
 import { fetchSecurityAnalysisResult } from '../../../services/study/security-analysis';
 import { useOpenLoaderShortWait } from '../../dialogs/commons/handle-loader';
 import { RunningStatus } from '../../utils/running-status';
 import { RESULTS_LOADING_DELAY } from '../../network/constants';
-import { ComputingType } from '@gridsuite/commons-ui';
+import { ComputingType, type MuiStyles } from '@gridsuite/commons-ui';
 import { SecurityAnalysisResultN } from './security-analysis-result-n';
 import { SecurityAnalysisResultNmk } from './security-analysis-result-nmk';
 import { ComputationReportViewer } from '../common/computation-report-viewer';
@@ -75,7 +74,8 @@ const styles = {
     resultContainer: {
         flexGrow: 1,
     },
-};
+} as const satisfies MuiStyles;
+
 const N_RESULTS_TAB_INDEX = 0;
 const NMK_RESULTS_TAB_INDEX = 1;
 const LOGS_TAB_INDEX = 2;
diff --git a/src/components/results/sensitivity-analysis/non-evacuated-energy/non-evacuated-energy-result-tab.tsx b/src/components/results/sensitivity-analysis/non-evacuated-energy/non-evacuated-energy-result-tab.tsx
index 737e5596d4..37cdc01caa 100644
--- a/src/components/results/sensitivity-analysis/non-evacuated-energy/non-evacuated-energy-result-tab.tsx
+++ b/src/components/results/sensitivity-analysis/non-evacuated-energy/non-evacuated-energy-result-tab.tsx
@@ -9,7 +9,6 @@ import { FunctionComponent, SyntheticEvent, useState } from 'react';
 import { NonEvacuatedEnergyTabProps } from './non-evacuated-energy-result.type';
 import { NonEvacuatedEnergyResult } from './non-evacuated-energy-result';
 import { fetchNonEvacuatedEnergyResult } from '../../../../services/study/non-evacuated-energy';
-
 import { useOpenLoaderShortWait } from '../../../dialogs/commons/handle-loader';
 import { Box, LinearProgress, Tab, Tabs } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
@@ -17,7 +16,7 @@ import { RunningStatus } from '../../../utils/running-status';
 import { ComputationReportViewer } from '../../common/computation-report-viewer';
 import { useSelector } from 'react-redux';
 import { AppState } from '../../../../redux/reducer';
-import { ComputingType } from '@gridsuite/commons-ui';
+import { ComputingType, type MuiStyles } from '@gridsuite/commons-ui';
 import { RESULTS_LOADING_DELAY } from '../../../network/constants';
 import { nonEvacuatedEnergyResultInvalidations } from '../../../computing-status/use-all-computing-status';
 import { useNodeData } from 'components/use-node-data';
@@ -38,7 +37,7 @@ const styles = {
     resultContainer: {
         flexGrow: 1,
     },
-};
+} as const satisfies MuiStyles;
 
 export const NonEvacuatedEnergyResultTab: FunctionComponent<NonEvacuatedEnergyTabProps> = ({
     studyUuid,
diff --git a/src/components/results/sensitivity-analysis/non-evacuated-energy/non-evacuated-energy-result.tsx b/src/components/results/sensitivity-analysis/non-evacuated-energy/non-evacuated-energy-result.tsx
index cc9ef57b71..75f9ea9db5 100644
--- a/src/components/results/sensitivity-analysis/non-evacuated-energy/non-evacuated-energy-result.tsx
+++ b/src/components/results/sensitivity-analysis/non-evacuated-energy/non-evacuated-energy-result.tsx
@@ -5,12 +5,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { FunctionComponent, useCallback } from 'react';
-
 import { NonEvacuatedEnergyResultProps } from './non-evacuated-energy-result.type';
 import { FormattedMessage } from 'react-intl';
 import { RunningStatus } from '../../../utils/running-status';
 import fileSaver from 'file-saver';
 import { Box, Button } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     buttonExportResult: {
@@ -18,7 +18,7 @@ const styles = {
         position: 'relative',
         marginTop: '10px',
     },
-};
+} as const satisfies MuiStyles;
 
 export const NonEvacuatedEnergyResult: FunctionComponent<NonEvacuatedEnergyResultProps> = ({ result, status }) => {
     const exportResult = useCallback(() => {
diff --git a/src/components/results/stateestimation/state-estimation-result-tab.tsx b/src/components/results/stateestimation/state-estimation-result-tab.tsx
index 663849f435..b748803c4d 100644
--- a/src/components/results/stateestimation/state-estimation-result-tab.tsx
+++ b/src/components/results/stateestimation/state-estimation-result-tab.tsx
@@ -15,7 +15,7 @@ import { StateEstimationStatusResult } from './state-estimation-status-result';
 import { fetchStateEstimationResult } from '../../../services/study/state-estimation';
 import RunningStatus from 'components/utils/running-status';
 import { AppState } from 'redux/reducer';
-import { ComputingType } from '@gridsuite/commons-ui';
+import { ComputingType, type MuiStyles } from '@gridsuite/commons-ui';
 import { useSelector } from 'react-redux';
 import { StateEstimationQualityResult } from './state-estimation-quality-result';
 import GlassPane from '../common/glass-pane';
@@ -43,7 +43,7 @@ const styles = {
     emptySpace: {
         flexGrow: 1,
     },
-};
+} as const satisfies MuiStyles;
 
 export const StateEstimationResultTab: FunctionComponent<StateEstimationTabProps> = ({
     studyUuid,
diff --git a/src/components/results/stateestimation/state-estimation-status-result.tsx b/src/components/results/stateestimation/state-estimation-status-result.tsx
index 94a6ae6681..c02bf91754 100644
--- a/src/components/results/stateestimation/state-estimation-status-result.tsx
+++ b/src/components/results/stateestimation/state-estimation-status-result.tsx
@@ -5,12 +5,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { FunctionComponent } from 'react';
-
 import { Stack, Typography } from '@mui/material';
-
 import { StateEstimationResultStatusProps } from './state-estimation-result.type';
-
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     typography: {
@@ -19,7 +17,7 @@ const styles = {
     valueTypography: {
         marginLeft: '10px',
     },
-};
+} as const satisfies MuiStyles;
 
 export const StateEstimationStatusResult: FunctionComponent<StateEstimationResultStatusProps> = ({ result }) => {
     const renderStateEstimationStatusResult = () => {
diff --git a/src/components/spreadsheet-view/add-spreadsheet/add-spreadsheet-button.tsx b/src/components/spreadsheet-view/add-spreadsheet/add-spreadsheet-button.tsx
index c9113bf5b5..c4a36783b1 100644
--- a/src/components/spreadsheet-view/add-spreadsheet/add-spreadsheet-button.tsx
+++ b/src/components/spreadsheet-view/add-spreadsheet/add-spreadsheet-button.tsx
@@ -6,9 +6,9 @@
  */
 
 import { useCallback, useState } from 'react';
-import { Button, type ButtonProps, Menu, MenuItem, Theme, Tooltip } from '@mui/material';
+import { Button, type ButtonProps, Menu, MenuItem, Tooltip } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
-import { useStateBoolean } from '@gridsuite/commons-ui';
+import { type MuiStyles, useStateBoolean } from '@gridsuite/commons-ui';
 import { FormattedMessage } from 'react-intl';
 import { ResetNodeAliasCallback } from '../hooks/use-node-aliases';
 import AddEmptySpreadsheetDialog from './dialogs/add-empty-spreadsheet-dialog';
@@ -22,11 +22,11 @@ export type AddSpreadsheetButtonProps = {
 };
 
 const styles = {
-    addButton: (theme: Theme) => ({
+    addButton: (theme) => ({
         color: theme.palette.primary.main,
         minWidth: '100%',
     }),
-};
+} as const satisfies MuiStyles;
 
 export interface SpreadsheetOption {
     id: string;
diff --git a/src/components/spreadsheet-view/add-spreadsheet/styles/styles.ts b/src/components/spreadsheet-view/add-spreadsheet/styles/styles.ts
index bb1660bd7f..365e432521 100644
--- a/src/components/spreadsheet-view/add-spreadsheet/styles/styles.ts
+++ b/src/components/spreadsheet-view/add-spreadsheet/styles/styles.ts
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { SxProps, Theme } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 /**
  * Shared styles for dialog components
@@ -14,4 +14,4 @@ export const dialogStyles = {
     dialogContent: {
         minWidth: '45%',
     },
-} as const satisfies Record<string, SxProps<Theme>>;
+} as const satisfies MuiStyles;
diff --git a/src/components/spreadsheet-view/columns/column-creation-dialog.tsx b/src/components/spreadsheet-view/columns/column-creation-dialog.tsx
index b0754f1703..08f71ea8f3 100644
--- a/src/components/spreadsheet-view/columns/column-creation-dialog.tsx
+++ b/src/components/spreadsheet-view/columns/column-creation-dialog.tsx
@@ -7,32 +7,21 @@
 
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import {
-    Box,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    Grid,
-    Link,
-    SxProps,
-    Theme,
-    Typography,
-} from '@mui/material';
+import { Box, Dialog, DialogActions, DialogContent, DialogTitle, Grid, Link, Typography } from '@mui/material';
 import {
     AutocompleteInput,
     CancelButton,
     CustomFormProvider,
     ExpandingTextField,
     IntegerInput,
+    type MuiStyles,
     MultipleAutocompleteInput,
     SubmitButton,
     TextInput,
     useSnackMessage,
-    UseStateBooleanReturn,
+    type UseStateBooleanReturn,
 } from '@gridsuite/commons-ui';
 import { useForm, UseFormSetError, useWatch } from 'react-hook-form';
-
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppDispatch } from 'redux/store';
@@ -75,7 +64,7 @@ const styles = {
     columnDescription: { width: '95%', marginTop: '20px', marginBottom: '20px' },
     field: { width: '70%' },
     actionButtons: { display: 'flex', gap: 2, justifyContent: 'end' },
-} as const satisfies Record<string, SxProps<Theme>>;
+} as const satisfies MuiStyles;
 
 const COLUMN_NAME_REGEX = /\W/g;
 
diff --git a/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tab-label.tsx b/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tab-label.tsx
index b53756f6cf..509bd6d383 100644
--- a/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tab-label.tsx
+++ b/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tab-label.tsx
@@ -5,10 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useState, useRef, useEffect } from 'react';
-import { ButtonBase, Box, Typography, Menu, MenuItem, Tooltip, Theme } from '@mui/material';
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, ButtonBase, Menu, MenuItem, type Theme, Tooltip, Typography } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 // Menu action constants
 const RENAME = 'RENAME';
@@ -31,7 +32,7 @@ const styles = {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
-    getContainer: (theme: Theme) => ({
+    getContainer: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -46,17 +47,18 @@ const styles = {
             display: 'flex',
         },
     }),
-    getTabActionButton: (theme: Theme, disabled: boolean) => ({
-        color: disabled ? theme.palette.text.disabled : theme.palette.text.primary,
-        padding: 0.5,
-        borderRadius: '50%',
-        cursor: disabled ? 'default' : 'pointer',
-        opacity: disabled ? 0.5 : 1,
-        '&:hover': {
-            backgroundColor: disabled ? 'transparent' : theme.palette.action.hover,
-        },
-    }),
-};
+} as const satisfies MuiStyles;
+
+const getTabActionButton = (theme: Theme, disabled: boolean) => ({
+    color: disabled ? theme.palette.text.disabled : theme.palette.text.primary,
+    padding: 0.5,
+    borderRadius: '50%',
+    cursor: disabled ? 'default' : 'pointer',
+    opacity: disabled ? 0.5 : 1,
+    '&:hover': {
+        backgroundColor: disabled ? 'transparent' : theme.palette.action.hover,
+    },
+});
 
 interface SpreadsheetTabLabelProps {
     name: string;
@@ -116,7 +118,7 @@ export const SpreadsheetTabLabel: React.FC<SpreadsheetTabLabelProps> = ({
     );
 
     return (
-        <Box sx={(theme) => styles.getContainer(theme)}>
+        <Box sx={(theme) => styles.getContainer(theme) /*TODO memoize*/}>
             {isTextTruncated ? (
                 <Tooltip title={name} placement="bottom" arrow>
                     {typographyComponent}
@@ -127,7 +129,7 @@ export const SpreadsheetTabLabel: React.FC<SpreadsheetTabLabelProps> = ({
             <div className="tab-actions">
                 <ButtonBase
                     component="div"
-                    sx={(theme) => styles.getTabActionButton(theme, disabled)}
+                    sx={(theme) => getTabActionButton(theme, disabled)}
                     disabled={disabled}
                     onClick={disabled ? undefined : handleMenuOpen}
                 >
diff --git a/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tabs-toolbar.tsx b/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tabs-toolbar.tsx
index e5dd39ba52..cd44183d23 100644
--- a/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tabs-toolbar.tsx
+++ b/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tabs-toolbar.tsx
@@ -5,10 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid, type GridProps, type Theme } from '@mui/material';
+import { Grid, type GridProps } from '@mui/material';
 import { Restore as RestoreIcon, Save as SaveIcon } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import type { AppState } from '../../../redux/reducer';
 import NodesConfigButton from '../spreadsheet/spreadsheet-toolbar/nodes-config/nodes-config-button';
 import type { NodeAlias } from '../types/node-alias.type';
@@ -16,11 +17,11 @@ import TooltipIconButton from '../../common/tooltip-icon-button';
 import PartialLoadingMenuButton from './toolbar/PartialLoadingMenuButton';
 
 const styles = {
-    button: (theme: Theme) => ({
+    button: (theme) => ({
         color: theme.palette.primary.main,
         minWidth: '100%',
     }),
-};
+} as const satisfies MuiStyles;
 
 export type SpreadsheetTabsToolbarProps = Omit<GridProps, 'item' | 'container'> & {
     selectedTabIndex: number;
diff --git a/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tabs.tsx b/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tabs.tsx
index 2b97c40d33..0097a58adb 100644
--- a/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tabs.tsx
+++ b/src/components/spreadsheet-view/spreadsheet-tabs/spreadsheet-tabs.tsx
@@ -17,7 +17,7 @@ import {
     renameTableDefinition,
     reorderTableDefinitions,
 } from 'redux/actions';
-import { PopupConfirmationDialog, useSnackMessage, useStateBoolean } from '@gridsuite/commons-ui';
+import { type MuiStyles, PopupConfirmationDialog, useSnackMessage, useStateBoolean } from '@gridsuite/commons-ui';
 import { useIntl } from 'react-intl';
 import type { DropResult } from '@hello-pangea/dnd';
 import DroppableTabs from 'components/utils/draggable-tab/droppable-tabs';
@@ -38,8 +38,8 @@ import { SaveSpreadsheetCollectionDialog } from '../spreadsheet/spreadsheet-tool
 import SpreadsheetTabsToolbar from './spreadsheet-tabs-toolbar';
 import { SpreadsheetModelGlobalEditorDialog } from '../spreadsheet/spreadsheet-toolbar/global-model-editor/spreadsheet-model-global-editor-dialog';
 import {
-    columnsModelForm,
     COLUMNS_MODEL,
+    columnsModelForm,
 } from '../spreadsheet/spreadsheet-toolbar/global-model-editor/spreadsheet-model-global-editor.utils';
 import { ColumnGlobalModel } from '../spreadsheet/spreadsheet-toolbar/global-model-editor/spreadsheet-model-global-editor.type';
 
@@ -57,7 +57,7 @@ const draggableTabStyles = {
         minHeight: 'auto',
         px: 1,
     },
-};
+} as const satisfies MuiStyles;
 
 interface SpreadsheetTabsProps {
     selectedTabUuid: UUID | null;
diff --git a/src/components/spreadsheet-view/spreadsheet-tabs/toolbar/PartialLoadingMenuButton.tsx b/src/components/spreadsheet-view/spreadsheet-tabs/toolbar/PartialLoadingMenuButton.tsx
index a8cebaf696..04d229fd4b 100644
--- a/src/components/spreadsheet-view/spreadsheet-tabs/toolbar/PartialLoadingMenuButton.tsx
+++ b/src/components/spreadsheet-view/spreadsheet-tabs/toolbar/PartialLoadingMenuButton.tsx
@@ -7,10 +7,11 @@
 
 import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Badge, ListSubheader, Menu, type SxProps, type Theme } from '@mui/material';
+import { Badge, ListSubheader, Menu } from '@mui/material';
 import { Dataset as DatasetIcon, DatasetOutlined as DatasetDisabled } from '@mui/icons-material';
 import TooltipIconButton, { type TooltipIconButtonProps } from '../../../common/tooltip-icon-button';
 import { useSelector } from 'react-redux';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import type { AppState } from '../../../../redux/reducer';
 import { SpreadsheetEquipmentType } from '../../types/spreadsheet.type';
 import PartialLoadingMenuItem from './PartialLoadingMenuItem';
@@ -20,7 +21,7 @@ const styles = {
     headers: (theme) => ({
         backgroundColor: 'transparent',
     }),
-} as const satisfies Record<string, SxProps<Theme>>;
+} as const satisfies MuiStyles;
 
 export type PartialLoadingMenuButtonProps = Omit<TooltipIconButtonProps, 'tooltip' | 'size' | 'onClick'>;
 
diff --git a/src/components/spreadsheet-view/spreadsheet-view.tsx b/src/components/spreadsheet-view/spreadsheet-view.tsx
index c277dfa28f..474560833c 100644
--- a/src/components/spreadsheet-view/spreadsheet-view.tsx
+++ b/src/components/spreadsheet-view/spreadsheet-view.tsx
@@ -20,7 +20,7 @@ import { Spreadsheet } from './spreadsheet/spreadsheet';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { getSpreadsheetConfigCollection, setSpreadsheetConfigCollection } from 'services/study/study-config';
 import { initTableDefinitions, setActiveSpreadsheetTab } from 'redux/actions';
-import { PopupConfirmationDialog, useSnackMessage } from '@gridsuite/commons-ui';
+import { type MuiStyles, PopupConfirmationDialog, useSnackMessage } from '@gridsuite/commons-ui';
 import { processSpreadsheetsCollectionData } from './add-spreadsheet/dialogs/add-spreadsheet-utils';
 import { DiagramType } from 'components/grid-layout/cards/diagrams/diagram.type';
 
@@ -30,7 +30,7 @@ const styles = {
         top: '30%',
         left: '43%',
     },
-};
+} as const satisfies MuiStyles;
 
 interface SpreadsheetViewProps {
     currentNode: CurrentTreeNode;
diff --git a/src/components/spreadsheet-view/spreadsheet.style.ts b/src/components/spreadsheet-view/spreadsheet.style.ts
index 2ea66b451e..4814eb5e94 100644
--- a/src/components/spreadsheet-view/spreadsheet.style.ts
+++ b/src/components/spreadsheet-view/spreadsheet.style.ts
@@ -5,6 +5,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+import { type MuiStyles } from '@gridsuite/commons-ui';
+
 export const spreadsheetStyles = {
     spreadsheetButton: {
         display: 'inline-flex',
@@ -15,4 +17,4 @@ export const spreadsheetStyles = {
         borderRadius: '6px',
         border: '1px solid',
     },
-};
+} as const satisfies MuiStyles;
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-content/equipment-table.style.ts b/src/components/spreadsheet-view/spreadsheet/spreadsheet-content/equipment-table.style.ts
index 030d18e3b1..0a033afbb9 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-content/equipment-table.style.ts
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-content/equipment-table.style.ts
@@ -4,7 +4,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import type { SxProps, Theme } from '@mui/material';
+
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 export const styles = {
     noBorderRight: {
@@ -13,4 +14,4 @@ export const styles = {
             borderRight: 'none',
         },
     },
-} as const satisfies Record<string, SxProps<Theme>>;
+} as const satisfies MuiStyles;
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-content/spreadsheet-content.tsx b/src/components/spreadsheet-view/spreadsheet/spreadsheet-content/spreadsheet-content.tsx
index 212c784204..b24dc19dd0 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-content/spreadsheet-content.tsx
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-content/spreadsheet-content.tsx
@@ -8,12 +8,12 @@
 import { memo, type RefObject, useCallback, useEffect, useMemo, useState } from 'react';
 import { useSpreadsheetEquipments } from './hooks/use-spreadsheet-equipments';
 import { EquipmentTable } from './equipment-table';
-import { type Identifiable } from '@gridsuite/commons-ui';
+import { type Identifiable, type MuiStyles } from '@gridsuite/commons-ui';
 import { type CustomColDef } from 'components/custom-aggrid/custom-aggrid-filters/custom-aggrid-filter.type';
 import { SpreadsheetEquipmentType, type SpreadsheetTabDefinition } from '../../types/spreadsheet.type';
 import { type CurrentTreeNode } from 'components/graph/tree-node.type';
 import { type AgGridReact } from 'ag-grid-react';
-import { Alert, Box, type Theme } from '@mui/material';
+import { Alert, Box } from '@mui/material';
 import { useEquipmentModification } from './hooks/use-equipment-modification';
 import { type NodeAlias } from '../../types/node-alias.type';
 import { FormattedMessage } from 'react-intl';
@@ -27,7 +27,7 @@ import { DiagramType } from 'components/grid-layout/cards/diagrams/diagram.type'
 import { type RowDataUpdatedEvent } from 'ag-grid-community';
 
 const styles = {
-    table: (theme: Theme) => ({
+    table: (theme) => ({
         marginTop: theme.spacing(2.5),
         lineHeight: 'unset',
         flexGrow: 1,
@@ -41,7 +41,7 @@ const styles = {
         top: '30%',
         left: '43%',
     },
-};
+} as const satisfies MuiStyles;
 
 interface SpreadsheetContentProps {
     gridRef: RefObject<AgGridReact>;
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/columns-config.tsx b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/columns-config.tsx
index 9b89ce8e1c..47a95283cb 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/columns-config.tsx
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/columns-config.tsx
@@ -6,7 +6,6 @@
  */
 
 import { Button, Checkbox, IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import { Theme } from '@mui/material/styles';
 import { FunctionComponent, useCallback, useEffect, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
@@ -18,7 +17,7 @@ import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { updateTableDefinition } from 'redux/actions';
 import { UUID } from 'crypto';
-import { useSnackMessage } from '@gridsuite/commons-ui';
+import { type MuiStyles, useSnackMessage } from '@gridsuite/commons-ui';
 import { SpreadsheetTabDefinition } from '../../types/spreadsheet.type';
 import { spreadsheetStyles } from '../../spreadsheet.style';
 import { updateColumnStates } from 'services/study/study-config';
@@ -30,7 +29,7 @@ import { ROW_INDEX_COLUMN_STATE } from '../../constants';
 const MAX_LOCKS_PER_TAB = 5;
 
 const styles = {
-    checkboxSelectAll: (theme: Theme) => ({
+    checkboxSelectAll: (theme) => ({
         padding: theme.spacing(0, 3, 2, 2),
         fontWeight: 'bold',
         cursor: 'pointer',
@@ -38,15 +37,15 @@ const styles = {
     checkboxItem: {
         cursor: 'pointer',
     },
-    columnConfigClosedLock: (theme: Theme) => ({
+    columnConfigClosedLock: (theme) => ({
         fontSize: '1.2em',
         color: theme.palette.action.active,
     }),
-    columnConfigOpenLock: (theme: Theme) => ({
+    columnConfigOpenLock: (theme) => ({
         fontSize: '1.2em',
         color: theme.palette.action.disabled,
     }),
-};
+} as const satisfies MuiStyles;
 
 interface ColumnsConfigProps {
     gridRef: React.RefObject<AgGridReact>;
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/dependencies-editor.tsx b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/dependencies-editor.tsx
index c7ceae4d8f..a7ca825720 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/dependencies-editor.tsx
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/dependencies-editor.tsx
@@ -4,8 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { AutocompleteInputProps, genHelperError } from '@gridsuite/commons-ui';
-
+import { type AutocompleteInputProps, genHelperError, type MuiStyles } from '@gridsuite/commons-ui';
 import { useController } from 'react-hook-form';
 import { SyntheticEvent } from 'react';
 import { Autocomplete, AutocompleteProps, TextField } from '@mui/material';
@@ -14,7 +13,7 @@ const styles = {
     autocomplete: {
         maxWidth: '100%',
     },
-};
+} as const satisfies MuiStyles;
 
 type DependenciesEditorProps = Pick<AutocompleteProps<string, true, false, false>, 'disabled'> & {
     name: AutocompleteInputProps['name'];
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/formula-editor.tsx b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/formula-editor.tsx
index 44346bf7f5..6f68ff3611 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/formula-editor.tsx
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/formula-editor.tsx
@@ -4,11 +4,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { ExpandingTextField, ExpandingTextFieldProps } from '@gridsuite/commons-ui';
+import { ExpandingTextField, type ExpandingTextFieldProps, type SxStyle } from '@gridsuite/commons-ui';
 
 const styles = {
     flexGrow: 1,
-};
+} as const satisfies SxStyle;
 
 export default function FormulaEditor({ name }: Readonly<ExpandingTextFieldProps>) {
     return <ExpandingTextField name={name} label="" minRows={3} rows={3} sx={styles} />;
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/spreadsheet-model-global-editor-dialog.tsx b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/spreadsheet-model-global-editor-dialog.tsx
index e749934219..3ded31c8ce 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/spreadsheet-model-global-editor-dialog.tsx
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/spreadsheet-model-global-editor-dialog.tsx
@@ -7,9 +7,8 @@
 
 import { useEffect } from 'react';
 import { Grid } from '@mui/material';
-import { CustomFormProvider, UseStateBooleanReturn } from '@gridsuite/commons-ui';
+import { CustomFormProvider, type MuiStyles, type UseStateBooleanReturn } from '@gridsuite/commons-ui';
 import { useForm } from 'react-hook-form';
-
 import { yupResolver } from '@hookform/resolvers/yup';
 import { ModificationDialog } from 'components/dialogs/commons/modificationDialog';
 import { SpreadsheetModelGlobalEditorTable } from './spreadsheet-model-global-editor-table';
@@ -34,7 +33,7 @@ const styles = {
         maxWidth: 'none',
         margin: 'auto',
     },
-};
+} as const satisfies MuiStyles;
 
 const toCustomColumnsGlobalModelDialogFormValues = (columnsModel: ColumnGlobalModel[]) => {
     return { [COLUMNS_MODEL]: columnsModel };
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/nodes-config/nodes-config-button.tsx b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/nodes-config/nodes-config-button.tsx
index 22392281a4..7eb4e49512 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/nodes-config/nodes-config-button.tsx
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/nodes-config/nodes-config-button.tsx
@@ -6,8 +6,8 @@
  */
 
 import { FormattedMessage } from 'react-intl';
-import { Badge, Button, type Theme, Tooltip } from '@mui/material';
-import { useStateBoolean } from '@gridsuite/commons-ui';
+import { Badge, Button, Tooltip } from '@mui/material';
+import { type MuiStyles, useStateBoolean } from '@gridsuite/commons-ui';
 import { useMemo } from 'react';
 import { validAlias } from '../../../hooks/use-node-aliases';
 import { SpreadsheetEquipmentType } from '../../../types/spreadsheet.type';
@@ -17,7 +17,7 @@ import { PolylineOutlined } from '@mui/icons-material';
 import { useNodeConfigNotificationsListener } from './use-node-config-notifications-listener';
 
 const styles = {
-    badgeStyle: (theme: Theme) => ({
+    badgeStyle: (theme) => ({
         '& .MuiBadge-badge': {
             minWidth: theme.spacing(2),
             height: theme.spacing(2),
@@ -25,11 +25,11 @@ const styles = {
             padding: theme.spacing(0, 0.5),
         },
     }),
-    nodesConfigButton: (theme: Theme) => ({
+    nodesConfigButton: (theme) => ({
         color: theme.palette.primary.main,
         minWidth: '100%',
     }),
-};
+} as const satisfies MuiStyles;
 
 type NodesConfigButtonProps = {
     disabled?: boolean;
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/nodes-config/nodes-config-dialog.tsx b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/nodes-config/nodes-config-dialog.tsx
index da0ecd4dbc..90106625f3 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/nodes-config/nodes-config-dialog.tsx
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/nodes-config/nodes-config-dialog.tsx
@@ -7,9 +7,8 @@
 
 import { useEffect, useMemo } from 'react';
 import { Grid } from '@mui/material';
-import { CustomFormProvider, UseStateBooleanReturn } from '@gridsuite/commons-ui';
+import { CustomFormProvider, type MuiStyles, type UseStateBooleanReturn } from '@gridsuite/commons-ui';
 import { useForm } from 'react-hook-form';
-
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
@@ -33,7 +32,7 @@ const styles = {
         maxWidth: 'none',
         margin: 'auto',
     },
-};
+} as const satisfies MuiStyles;
 
 const toCustomColumnNodesDialogFormValues = (nodeAliases: NodeAlias[]) => {
     return { [NODES_ALIASES]: nodeAliases };
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/row-counter/filtered-row-counter.tsx b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/row-counter/filtered-row-counter.tsx
index f7bf9f4527..f9dbaee1a8 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/row-counter/filtered-row-counter.tsx
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/row-counter/filtered-row-counter.tsx
@@ -8,14 +8,14 @@ import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from '../../../../../redux/reducer';
 import { SpreadsheetTabDefinition } from '../../../types/spreadsheet.type';
-import { Box, Button, CircularProgress, Fade, Theme, Tooltip } from '@mui/material';
+import { Box, Button, CircularProgress, Fade, Tooltip } from '@mui/material';
 import FilterAltOffIcon from '@mui/icons-material/FilterAltOff';
 import { resetSpreadsheetColumnsFilters } from '../../../../../services/study/study-config';
 import { UseFilteredRowCounterInfoReturn } from './use-filtered-row-counter';
-import { useSnackMessage } from '@gridsuite/commons-ui';
+import { type MuiStyles, useSnackMessage } from '@gridsuite/commons-ui';
 
 const styles = {
-    getContainer: (theme: Theme) => ({
+    getContainer: (theme) => ({
         minWidth: theme.spacing(18),
         paddingRight: '10px',
         paddingLeft: '10px',
@@ -29,7 +29,7 @@ const styles = {
     restoreButton: {
         paddingRight: '3px',
     },
-};
+} as const satisfies MuiStyles;
 
 export type SpreadsheetFilteredRowCountProps = {
     rowCounterInfos: UseFilteredRowCounterInfoReturn;
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/save/save-spreadsheet-collection-dialog.tsx b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/save/save-spreadsheet-collection-dialog.tsx
index 72ab911952..5455219173 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/save/save-spreadsheet-collection-dialog.tsx
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/save/save-spreadsheet-collection-dialog.tsx
@@ -7,24 +7,25 @@
 
 import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { Checkbox, ListItem, ListItemButton, ListItemIcon, ListItemText, IconButton, Theme } from '@mui/material';
+import { Checkbox, IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { useSelector } from 'react-redux';
 import {
+    ElementSaveDialog,
     ElementType,
-    UseStateBooleanReturn,
+    type IElementCreationDialog,
+    type IElementUpdateDialog,
+    type MuiStyles,
     useSnackMessage,
-    IElementCreationDialog,
-    ElementSaveDialog,
-    IElementUpdateDialog,
+    type UseStateBooleanReturn,
 } from '@gridsuite/commons-ui';
 import { AppState } from '../../../../../redux/reducer';
 import { SelectOptionsDialog } from '../../../../../utils/dialogs';
 import {
-    SpreadsheetConfig,
-    SpreadsheetCollection,
     ColumnDefinitionDto,
+    SpreadsheetCollection,
+    SpreadsheetConfig,
     SpreadsheetEquipmentType,
 } from '../../../types/spreadsheet.type';
 import { v4 as uuid4 } from 'uuid';
@@ -39,12 +40,12 @@ interface SaveSpreadsheetCollectionDialogProps {
 }
 
 const styles = {
-    checkboxForFilters: (theme: Theme) => ({
+    checkboxForFilters: (theme) => ({
         padding: theme.spacing(0, 3, 0, 2),
         fontWeight: 'bold',
         cursor: 'pointer',
     }),
-    checkboxSelectAll: (theme: Theme) => ({
+    checkboxSelectAll: (theme) => ({
         padding: theme.spacing(0, 3, 2, 2),
         fontWeight: 'bold',
         cursor: 'pointer',
@@ -53,7 +54,7 @@ const styles = {
         cursor: 'pointer',
         padding: '0 16px',
     },
-};
+} as const satisfies MuiStyles;
 
 interface TableState {
     name: string;
diff --git a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/spreadsheet-toolbar.tsx b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/spreadsheet-toolbar.tsx
index 8e885c4aa6..2b8e9e72c6 100644
--- a/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/spreadsheet-toolbar.tsx
+++ b/src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/spreadsheet-toolbar.tsx
@@ -9,7 +9,8 @@ import type { RefObject } from 'react';
 import { CustomColDef } from 'components/custom-aggrid/custom-aggrid-filters/custom-aggrid-filter.type';
 import { type SpreadsheetTabDefinition } from '../../types/spreadsheet.type';
 import { AgGridReact } from 'ag-grid-react';
-import { Grid, Theme } from '@mui/material';
+import { Grid } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { ColumnsConfig } from './columns-config';
 import ColumnCreationButton from './column-creation-button';
 import { NodeAlias } from 'components/spreadsheet-view/types/node-alias.type';
@@ -19,18 +20,18 @@ import { FilteredRowCounter } from './row-counter/filtered-row-counter';
 import { UseFilteredRowCounterInfoReturn } from './row-counter/use-filtered-row-counter';
 
 const styles = {
-    toolbar: (theme: Theme) => ({
+    toolbar: (theme) => ({
         marginTop: theme.spacing(2),
         alignItems: 'center',
     }),
-    filterContainer: (theme: Theme) => ({
+    filterContainer: (theme) => ({
         marginLeft: theme.spacing(1),
         display: 'flex',
     }),
-    save: (theme: Theme) => ({
+    save: (theme) => ({
         marginRight: theme.spacing(1),
     }),
-};
+} as const satisfies MuiStyles;
 
 interface SpreadsheetToolbarProps {
     gridRef: RefObject<AgGridReact>;
diff --git a/src/components/top-bar-equipment-seach-dialog/top-bar-equipment-search-input.tsx b/src/components/top-bar-equipment-seach-dialog/top-bar-equipment-search-input.tsx
index 6d8d9bac97..77b8b5dfd5 100644
--- a/src/components/top-bar-equipment-seach-dialog/top-bar-equipment-search-input.tsx
+++ b/src/components/top-bar-equipment-seach-dialog/top-bar-equipment-search-input.tsx
@@ -4,7 +4,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { EquipmentType, ExtendedEquipmentType, SEARCH_EQUIPMENTS } from '@gridsuite/commons-ui';
+import {
+    type EquipmentType,
+    type ExtendedEquipmentType,
+    type MuiStyles,
+    SEARCH_EQUIPMENTS,
+} from '@gridsuite/commons-ui';
 import { Search, SearchOff, Tune } from '@mui/icons-material';
 import { AutocompleteRenderInputParams, Chip, IconButton, TextField } from '@mui/material';
 import { Dispatch, SetStateAction, useRef, useState } from 'react';
@@ -26,7 +31,7 @@ const styles = {
             color: 'black',
         },
     },
-};
+} as const satisfies MuiStyles;
 
 export const TopBarEquipmentSearchInput = (props: TopBarEquipmentSearchInputProps) => {
     const { displayedValue, params, equipmentType, setEquipmentType } = props;
diff --git a/src/components/top-bar-equipment-seach-dialog/top-bar-equipment-search-popover.tsx b/src/components/top-bar-equipment-seach-dialog/top-bar-equipment-search-popover.tsx
index c825cd4c95..0d2527efe3 100644
--- a/src/components/top-bar-equipment-seach-dialog/top-bar-equipment-search-popover.tsx
+++ b/src/components/top-bar-equipment-seach-dialog/top-bar-equipment-search-popover.tsx
@@ -4,9 +4,14 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { EquipmentType, ExtendedEquipmentType, SEARCH_EQUIPMENTS } from '@gridsuite/commons-ui';
+import {
+    type EquipmentType,
+    type ExtendedEquipmentType,
+    type MuiStyles,
+    SEARCH_EQUIPMENTS,
+} from '@gridsuite/commons-ui';
 import { HorizontalRule } from '@mui/icons-material';
-import { Box, FormControl, FormControlLabel, Popover, Radio, RadioGroup, Theme } from '@mui/material';
+import { Box, FormControl, FormControlLabel, Popover, Radio, RadioGroup } from '@mui/material';
 import { Dispatch, SetStateAction } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -21,12 +26,12 @@ const styles = {
         paddingBottom: 1,
         cursor: 'pointer',
     },
-    radioButtonColor: (theme: Theme) => ({
+    radioButtonColor: (theme) => ({
         '& .Mui-checked + .MuiFormControlLabel-label': {
             color: theme.palette.primary.main,
         },
     }),
-};
+} as const satisfies MuiStyles;
 
 interface TopBarEquipmentSearchPopoverProps {
     open: boolean;
diff --git a/src/components/utils/alert-custom-message-node.tsx b/src/components/utils/alert-custom-message-node.tsx
index a47ff7383f..ab7a3ef652 100644
--- a/src/components/utils/alert-custom-message-node.tsx
+++ b/src/components/utils/alert-custom-message-node.tsx
@@ -5,8 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { mergeSx } from '@gridsuite/commons-ui';
-import { Theme } from '@mui/material';
+import { mergeSx, type MuiStyles, type SxStyle } from '@gridsuite/commons-ui';
 import Alert from '@mui/material/Alert';
 import { FormattedMessage } from 'react-intl';
 
@@ -16,12 +15,12 @@ const styles = {
         top: '30%',
         left: '43%',
     },
-};
+} as const satisfies MuiStyles;
 
 interface AlertCustomMessageNodeProps {
     message: string;
     noMargin?: boolean;
-    style?: React.CSSProperties | ((theme: Theme) => React.CSSProperties);
+    style?: SxStyle;
 }
 
 const AlertCustomMessageNode = (props: AlertCustomMessageNodeProps) => {
diff --git a/src/components/utils/checkbox-autocomplete/checkbox-autocomplete.tsx b/src/components/utils/checkbox-autocomplete/checkbox-autocomplete.tsx
index bf6739a8f2..5ce009ee2f 100644
--- a/src/components/utils/checkbox-autocomplete/checkbox-autocomplete.tsx
+++ b/src/components/utils/checkbox-autocomplete/checkbox-autocomplete.tsx
@@ -16,8 +16,8 @@ import {
     Popper,
     styled,
     TextField,
-    Theme,
 } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { useIntl } from 'react-intl';
 import VirtualizedList from './virtualized-list';
 import CheckboxItem from './checkbox-item';
@@ -26,7 +26,7 @@ import CheckboxItem from './checkbox-item';
 // https://mui.com/material-ui/react-autocomplete/#virtualization
 
 const styles = {
-    autocomplete: (theme: Theme) => ({
+    autocomplete: (theme) => ({
         '.MuiAutocomplete-inputRoot': {
             height: '40px',
             backgroundColor: 'unset', // prevents the field from changing size when selected with the keyboard
@@ -48,7 +48,8 @@ const styles = {
             maxWidth: 'calc(100% - 32px)', // reduce 32px to avoid the number of hidden tags, e.g +2, shown in a new line
         },
     }),
-};
+} as const satisfies MuiStyles;
+
 // to reset all default alignments
 const StyledPopper = styled(Popper)({
     [`& .${autocompleteClasses.listbox}`]: {
diff --git a/src/components/utils/checkbox-autocomplete/checkbox-item.tsx b/src/components/utils/checkbox-autocomplete/checkbox-item.tsx
index 0248824509..2e613395a8 100644
--- a/src/components/utils/checkbox-autocomplete/checkbox-item.tsx
+++ b/src/components/utils/checkbox-autocomplete/checkbox-item.tsx
@@ -7,7 +7,7 @@
 
 import { HTMLAttributes } from 'react';
 import { Checkbox, Typography } from '@mui/material';
-import { OverflowableText } from '@gridsuite/commons-ui';
+import { type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 
 // component CheckboxItem is extracted and customized from renderRow in the MUI example
 // in order to reuse also in Autocomplete without virtualization
@@ -17,7 +17,7 @@ const styles = {
     checkbox: {
         marginRight: 8,
     },
-};
+} as const satisfies MuiStyles;
 
 interface CheckboxItemProps<Value> extends HTMLAttributes<HTMLElement> {
     option: Value;
diff --git a/src/components/utils/draggable-tab/draggable-tab.tsx b/src/components/utils/draggable-tab/draggable-tab.tsx
index 0fce38535b..28b913ddd5 100644
--- a/src/components/utils/draggable-tab/draggable-tab.tsx
+++ b/src/components/utils/draggable-tab/draggable-tab.tsx
@@ -8,11 +8,11 @@
 import { Draggable } from '@hello-pangea/dnd';
 import Tab, { TabProps } from '@mui/material/Tab';
 import { Box } from '@mui/material';
-import { SxProps, Theme } from '@mui/material/styles';
+import { type SxStyle } from '@gridsuite/commons-ui';
 
 interface DraggableTabStyles {
-    container?: SxProps<Theme>;
-    tab?: SxProps<Theme>;
+    container?: SxStyle;
+    tab?: SxStyle;
 }
 
 interface DraggableTabOwnProps {
diff --git a/src/components/utils/loader-with-overlay.tsx b/src/components/utils/loader-with-overlay.tsx
index 6e43807c6b..c800c8ebe3 100644
--- a/src/components/utils/loader-with-overlay.tsx
+++ b/src/components/utils/loader-with-overlay.tsx
@@ -7,6 +7,7 @@
 
 import { Box, CircularProgress, CircularProgressProps } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     overlay: {
@@ -24,7 +25,7 @@ const styles = {
         zIndex: 99,
         fontSize: 15,
     },
-};
+} as const satisfies MuiStyles;
 
 interface LoaderWithOverlayProps {
     color: CircularProgressProps['color'];
diff --git a/src/components/utils/renderTable-ExportCsv.tsx b/src/components/utils/renderTable-ExportCsv.tsx
index 7d6dd6391c..4cdeb630cd 100644
--- a/src/components/utils/renderTable-ExportCsv.tsx
+++ b/src/components/utils/renderTable-ExportCsv.tsx
@@ -7,7 +7,7 @@
 
 import { FunctionComponent, RefObject } from 'react';
 import { ColDef, GridReadyEvent, RowClassParams, RowDataUpdatedEvent, RowStyle } from 'ag-grid-community';
-import { CustomAGGrid, CsvExport } from '@gridsuite/commons-ui';
+import { CustomAGGrid, CsvExport, type MuiStyles } from '@gridsuite/commons-ui';
 import { AgGridReact } from 'ag-grid-react';
 import { Box } from '@mui/material';
 import { AGGRID_LOCALES } from '../../translations/not-intl/aggrid-locales';
@@ -28,7 +28,7 @@ const styles = {
     grid: {
         flexGrow: '1',
     },
-};
+} as const satisfies MuiStyles;
 
 interface RenderTableAndExportCsvProps {
     gridRef: RefObject<AgGridReact>;
diff --git a/src/components/utils/split-button.tsx b/src/components/utils/split-button.tsx
index 853421ed1e..acd76ef155 100644
--- a/src/components/utils/split-button.tsx
+++ b/src/components/utils/split-button.tsx
@@ -5,18 +5,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
+import {
+    Button,
+    ButtonGroup,
+    ClickAwayListener,
+    Grow,
+    ListItemIcon,
+    ListItemText,
+    MenuItem,
+    MenuList,
+    Paper,
+    Popper,
+} from '@mui/material';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Grow from '@mui/material/Grow';
-import Paper from '@mui/material/Paper';
-import Popper from '@mui/material/Popper';
-import MenuItem from '@mui/material/MenuItem';
-import MenuList from '@mui/material/MenuList';
-import ListItemIcon from '@mui/material/ListItemIcon';
 import StopIcon from '@mui/icons-material/Stop';
-import ListItemText from '@mui/material/ListItemText';
 import LoopIcon from '@mui/icons-material/Loop';
 import DoneIcon from '@mui/icons-material/Done';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
@@ -25,11 +27,10 @@ import RunningStatus from './running-status';
 import { useSelector } from 'react-redux';
 import { MouseEvent as ReactMouseEvent, useRef, useState } from 'react';
 import { AppState } from 'redux/reducer';
-import { Theme } from '@mui/material';
-import { mergeSx } from '@gridsuite/commons-ui';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    expand: (theme: Theme) => ({
+    expand: (theme) => ({
         marginLeft: 'auto',
         transition: theme.transitions.create('transform', {
             duration: theme.transitions.duration.shortest,
@@ -38,7 +39,7 @@ const styles = {
     expandOpen: {
         transform: 'rotate(180deg)',
     },
-    listOptions: (theme: Theme) => ({
+    listOptions: (theme) => ({
         minWidth: '270px',
         marginRight: '43px',
         position: 'relative',
@@ -90,7 +91,7 @@ const styles = {
             color: '#fdfdfd',
         },
     },
-    running: (theme: Theme) => ({
+    running: (theme) => ({
         backgroundColor: theme.palette.background.default,
         color: theme.palette.text.primary,
         border: '1px solid #808080',
@@ -106,7 +107,7 @@ const styles = {
             color: theme.palette.text.primary,
         },
     }),
-    idle: (theme: Theme) => ({
+    idle: (theme) => ({
         backgroundColor: theme.palette.background.default,
         color: theme.palette.text.primary,
         borderColor: '#808080',
@@ -127,7 +128,7 @@ const styles = {
     runMenuButton: {
         zIndex: 99,
     },
-};
+} as const satisfies MuiStyles;
 
 interface SplitButtonProps {
     runningStatus: RunningStatus;
diff --git a/src/components/utils/tab-utils.ts b/src/components/utils/tab-utils.ts
index 65160b7df0..beaf501603 100644
--- a/src/components/utils/tab-utils.ts
+++ b/src/components/utils/tab-utils.ts
@@ -5,17 +5,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { darken, lighten, Theme } from '@mui/material';
+import { darken, lighten } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    tabWithError: (theme: Theme) => ({
+    tabWithError: (theme) => ({
         '&.Mui-selected': { color: theme.palette.error.main },
         color: theme.palette.error.main,
     }),
-    tabWithErrorIndicator: (theme: Theme) => ({
+    tabWithErrorIndicator: (theme) => ({
         backgroundColor: theme.palette.error.main,
     }),
-};
+} as const satisfies MuiStyles;
 
 export function getTabIndicatorStyle<T extends number | string>(tabIndexesWithError: T[], index: T) {
     return tabIndexesWithError.includes(index) ? styles.tabWithErrorIndicator : undefined;
@@ -41,10 +42,10 @@ export const stylesLayout = {
     listDisplay: {
         height: '100%',
     },
-};
+} as const satisfies MuiStyles;
 
 export const tabStyles = {
-    listTitleDisplay: (theme: Theme) => ({
+    listTitleDisplay: (theme) => ({
         paddingTop: 1,
         paddingBottom: 1,
         paddingLeft: theme.spacing(2),
@@ -55,7 +56,7 @@ export const tabStyles = {
                 ? darken(theme.palette.background.paper, 0.1)
                 : theme.palette.background.paper,
     }),
-    listDisplay: (theme: Theme) => ({
+    listDisplay: (theme) => ({
         ...stylesLayout.listDisplay,
         backgroundColor:
             theme.palette.mode === 'light'
@@ -73,7 +74,7 @@ export const tabStyles = {
             height: '30px', //40px by default
         },
     }),
-    parametersBox: (theme: Theme) => ({
+    parametersBox: (theme) => ({
         backgroundColor:
             theme.palette.mode === 'light'
                 ? theme.palette.background.paper
@@ -82,15 +83,15 @@ export const tabStyles = {
         position: 'relative',
         padding: 0,
     }),
-    contentBox: (theme: Theme) => ({
+    contentBox: (theme) => ({
         paddingTop: theme.spacing(2),
         paddingBottom: theme.spacing(2),
         paddingLeft: theme.spacing(8),
         paddingRight: theme.spacing(8),
         height: '100%',
     }),
-    dividerTab: (theme: Theme) => ({
+    dividerTab: (theme) => ({
         padding: 0,
         minHeight: theme.spacing(1),
     }),
-};
+} as const satisfies MuiStyles;
diff --git a/src/components/voltage-init-result.tsx b/src/components/voltage-init-result.tsx
index 6437715921..1cadb4ffe8 100644
--- a/src/components/voltage-init-result.tsx
+++ b/src/components/voltage-init-result.tsx
@@ -9,9 +9,9 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import { useSelector } from 'react-redux';
 import { FormattedMessage, IntlShape, useIntl } from 'react-intl';
-import { Box, Button, LinearProgress, Stack, Theme, Typography } from '@mui/material';
+import { Box, Button, LinearProgress, Stack, Typography } from '@mui/material';
 import { Lens } from '@mui/icons-material';
-import { useSnackMessage, ComputingType, mergeSx } from '@gridsuite/commons-ui';
+import { ComputingType, mergeSx, type MuiStyles, useSnackMessage } from '@gridsuite/commons-ui';
 import {
     cloneVoltageInitModifications,
     getVoltageInitModifications,
@@ -50,13 +50,13 @@ const styles = {
         top: 0,
         left: 0,
     },
-    succeed: (theme: Theme) => ({
+    succeed: (theme) => ({
         color: theme.palette.success.main,
     }),
-    fail: (theme: Theme) => ({
+    fail: (theme) => ({
         color: theme.palette.error.main,
     }),
-    buttonApplyModifications: (theme: Theme) => ({
+    buttonApplyModifications: (theme) => ({
         display: 'flex',
         alignItems: 'center',
         paddingLeft: theme.spacing(2),
@@ -82,7 +82,7 @@ const styles = {
     hide: {
         display: 'none',
     },
-};
+} as const satisfies MuiStyles;
 
 export const VoltageInitResult: FunctionComponent<VoltageInitResultProps> = ({
     result = null,
diff --git a/src/utils/dialogs.tsx b/src/utils/dialogs.tsx
index 897f57e65d..b38b6ff4f3 100644
--- a/src/utils/dialogs.tsx
+++ b/src/utils/dialogs.tsx
@@ -5,15 +5,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
-import { CancelButton } from '@gridsuite/commons-ui';
+import { CancelButton, type SxStyle } from '@gridsuite/commons-ui';
 import { ReactElement, useCallback } from 'react';
-import { SxProps, Theme } from '@mui/material';
 
 interface SelectOptionsDialogProps {
     open: boolean;
@@ -21,7 +16,7 @@ interface SelectOptionsDialogProps {
     onClick: () => void;
     title: string;
     child: ReactElement;
-    style?: SxProps<Theme>;
+    style?: SxStyle;
     validateKey?: string;
     disabled?: boolean;
 }