diff --git a/packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx b/packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx index 45048fa891478..18e0f07ed8014 100644 --- a/packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx +++ b/packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import composeClasses from '@mui/utils/composeClasses'; -import { styled } from '@mui/material/styles'; import { getDataGridUtilityClass, gridClasses, @@ -8,7 +7,7 @@ import { GridColumnHeaderParams, GridColumnHeaderTitle, } from '@mui/x-data-grid'; -import type { GridBaseColDef } from '@mui/x-data-grid/internals'; +import { styled, GridBaseColDef } from '@mui/x-data-grid/internals'; import { getAggregationFunctionLabel } from '../hooks/features/aggregation/gridAggregationUtils'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; @@ -40,11 +39,15 @@ const GridAggregationFunctionLabel = styled('div', { overridesResolver: (_, styles) => styles.aggregationColumnHeaderLabel, })<{ ownerState: OwnerState }>(({ theme }) => { return { + // @ts-ignore `@mui/material` theme.typography does not exist fontSize: theme.typography.caption.fontSize, + // @ts-ignore `@mui/material` theme.typography does not exist lineHeight: theme.typography.caption.fontSize, position: 'absolute', bottom: 4, + // @ts-ignore `@mui/material` theme.typography does not exist fontWeight: theme.typography.fontWeightMedium, + // @ts-ignore `@mui/material` theme.vars does not exist color: (theme.vars || theme).palette.primary.dark, textTransform: 'uppercase', }; diff --git a/packages/x-data-grid-premium/src/components/GridFooterCell.tsx b/packages/x-data-grid-premium/src/components/GridFooterCell.tsx index d7b7c601d62cc..86a926c2062e7 100644 --- a/packages/x-data-grid-premium/src/components/GridFooterCell.tsx +++ b/packages/x-data-grid-premium/src/components/GridFooterCell.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; -import { getDataGridUtilityClass, GridRenderCellParams } from '@mui/x-data-grid'; -import { styled, Theme } from '@mui/material/styles'; +import { Theme } from '@mui/material/styles'; import { SxProps } from '@mui/system'; import composeClasses from '@mui/utils/composeClasses'; +import { getDataGridUtilityClass, GridRenderCellParams } from '@mui/x-data-grid'; +import { styled } from '@mui/x-data-grid/internals'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps'; @@ -11,7 +12,9 @@ const GridFooterCellRoot = styled('div', { slot: 'FooterCell', overridesResolver: (_, styles) => styles.footerCell, })<{ ownerState: OwnerState }>(({ theme }) => ({ + // @ts-ignore `@mui/material` theme.typography does not exist fontWeight: theme.typography.fontWeightMedium, + // @ts-ignore `@mui/material` theme.vars does not exist color: (theme.vars || theme).palette.primary.dark, })); @@ -54,6 +57,7 @@ function GridFooterCell(props: GridFooterCellProps) { const classes = useUtilityClasses(ownerState); return ( + // @ts-ignore `@mui/material` system styled() doesn't have a compatible sx prop {formattedValue} diff --git a/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx b/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx index ea0327ece85e1..8f9a2e421c0f2 100644 --- a/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx +++ b/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx @@ -1,7 +1,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { styled } from '@mui/material/styles'; -import { GridBaseColumnHeaders, UseGridColumnHeadersProps } from '@mui/x-data-grid/internals'; +import { + styled, + GridBaseColumnHeaders, + UseGridColumnHeadersProps, +} from '@mui/x-data-grid/internals'; import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders'; const Filler = styled('div')({ diff --git a/packages/x-data-grid-pro/src/components/GridDetailPanel.tsx b/packages/x-data-grid-pro/src/components/GridDetailPanel.tsx index a37b3e4bc8071..916474395a32b 100644 --- a/packages/x-data-grid-pro/src/components/GridDetailPanel.tsx +++ b/packages/x-data-grid-pro/src/components/GridDetailPanel.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { styled } from '@mui/material/styles'; +import { styled } from '@mui/x-data-grid/internals'; import { GridRowId } from '@mui/x-data-grid'; import { useResizeObserver } from '@mui/x-internals/useResizeObserver'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; @@ -15,6 +15,7 @@ const DetailPanel = styled('div', { })<{ ownerState: OwnerState }>(({ theme }) => ({ width: 'calc(var(--DataGrid-rowWidth) - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))', + // @ts-ignore theme.vars backgroundColor: (theme.vars || theme).palette.background.default, overflow: 'auto', })); diff --git a/packages/x-data-grid/src/components/GridPagination.tsx b/packages/x-data-grid/src/components/GridPagination.tsx index 495d57d7ee024..c288ba9d68197 100644 --- a/packages/x-data-grid/src/components/GridPagination.tsx +++ b/packages/x-data-grid/src/components/GridPagination.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import TablePagination, { tablePaginationClasses, TablePaginationProps, LabelDisplayedRowsArgs, } from '@mui/material/TablePagination'; +import { styled } from '../utils/styled'; import { useGridSelector } from '../hooks/utils/useGridSelector'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/components/GridRowCount.tsx b/packages/x-data-grid/src/components/GridRowCount.tsx index 1651bfa957652..c2e09c012b237 100644 --- a/packages/x-data-grid/src/components/GridRowCount.tsx +++ b/packages/x-data-grid/src/components/GridRowCount.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, SxProps, Theme } from '@mui/system'; +import { SxProps, Theme } from '@mui/system'; +import { styled } from '../utils/styled'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { getDataGridUtilityClass } from '../constants/gridClasses'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/components/GridScrollArea.tsx b/packages/x-data-grid/src/components/GridScrollArea.tsx index fda459d58ab95..90da2e40bbec6 100644 --- a/packages/x-data-grid/src/components/GridScrollArea.tsx +++ b/packages/x-data-grid/src/components/GridScrollArea.tsx @@ -4,8 +4,8 @@ import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback, } from '@mui/utils'; -import { styled } from '@mui/system'; import { fastMemo } from '@mui/x-internals/fastMemo'; +import { styled } from '../utils/styled'; import { DataGridProcessedProps } from '../models/props/DataGridProps'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { getDataGridUtilityClass, gridClasses } from '../constants'; diff --git a/packages/x-data-grid/src/components/GridSelectedRowCount.tsx b/packages/x-data-grid/src/components/GridSelectedRowCount.tsx index 17b033fbfeeab..be83eb97f1d2c 100644 --- a/packages/x-data-grid/src/components/GridSelectedRowCount.tsx +++ b/packages/x-data-grid/src/components/GridSelectedRowCount.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, SxProps, Theme } from '@mui/system'; +import { SxProps, Theme } from '@mui/system'; +import { styled } from '../utils/styled'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { getDataGridUtilityClass } from '../constants/gridClasses'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; @@ -54,7 +55,6 @@ const GridSelectedRowCount = React.forwardRef styles.editInputCell, })<{ ownerState: OwnerState }>(({ theme }) => ({ - ...theme.typography.body2, + // @ts-ignore `@mui/material` theme.typography does not exist + ...theme.typography?.body2, padding: '1px 0', '& input': { padding: '0 16px', diff --git a/packages/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx b/packages/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx index 47d2ecf6a4185..9ae2ee6769e35 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, SxProps, Theme } from '@mui/system'; +import { SxProps, Theme } from '@mui/system'; +import { styled } from '../../utils/styled'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { DataGridProcessedProps } from '../../models/props/DataGridProps'; diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx index cf70450d7643b..93585ae00a686 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import { styled } from '@mui/system'; +import { styled } from '../../utils/styled'; import { isOverflown } from '../../utils/domUtils'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx b/packages/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx index 7c0c88a6df7b6..9009af0a8d254 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridIconButtonContainer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import { styled } from '@mui/system'; +import { styled } from '../../utils/styled'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; diff --git a/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx b/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx index 431736337d349..39c6d67b4aab9 100644 --- a/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx +++ b/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; import FormControlLabel from '@mui/material/FormControlLabel'; -import { styled } from '@mui/material/styles'; +import { styled } from '../../utils/styled'; import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, diff --git a/packages/x-data-grid/src/components/containers/GridFooterContainer.tsx b/packages/x-data-grid/src/components/containers/GridFooterContainer.tsx index 42f4a1051319f..152de669545fb 100644 --- a/packages/x-data-grid/src/components/containers/GridFooterContainer.tsx +++ b/packages/x-data-grid/src/components/containers/GridFooterContainer.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, SxProps, Theme } from '@mui/system'; +import { Theme, SxProps } from '@mui/system'; +import { styled } from '../../utils/styled'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; diff --git a/packages/x-data-grid/src/components/containers/GridOverlay.tsx b/packages/x-data-grid/src/components/containers/GridOverlay.tsx index 73a339738ca41..0f47db584eabe 100644 --- a/packages/x-data-grid/src/components/containers/GridOverlay.tsx +++ b/packages/x-data-grid/src/components/containers/GridOverlay.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import { Theme, SxProps, styled } from '@mui/system'; +import { Theme, SxProps } from '@mui/system'; +import { styled } from '../../utils/styled'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx b/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx index e53f8d7809d1e..39bdb07b3d90c 100644 --- a/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx +++ b/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { styled, SxProps, Theme } from '@mui/system'; import composeClasses from '@mui/utils/composeClasses'; +import { SxProps, Theme } from '@mui/system'; +import { styled } from '../../utils/styled'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/components/menu/GridMenu.tsx b/packages/x-data-grid/src/components/menu/GridMenu.tsx index 5c338398ba4d7..2f9a924c8ab44 100644 --- a/packages/x-data-grid/src/components/menu/GridMenu.tsx +++ b/packages/x-data-grid/src/components/menu/GridMenu.tsx @@ -10,7 +10,7 @@ import { import Grow, { GrowProps } from '@mui/material/Grow'; import Paper from '@mui/material/Paper'; import Popper, { PopperProps } from '@mui/material/Popper'; -import { styled } from '@mui/material/styles'; +import { styled } from '../../utils/styled'; import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; @@ -48,6 +48,7 @@ const GridMenuRoot = styled(Popper, { slot: 'Menu', overridesResolver: (_, styles) => styles.menu, })<{ ownerState: OwnerState }>(({ theme }) => ({ + // @ts-ignore `@mui/material` theme.zIndex does not exist zIndex: theme.zIndex.modal, [`& .${gridClasses.menuList}`]: { outline: 0, diff --git a/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx index 1f14ea92cb31a..39a49de4c1024 100644 --- a/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx +++ b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx @@ -2,8 +2,7 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; import MenuList from '@mui/material/MenuList'; -import { styled } from '@mui/material/styles'; - +import { styled } from '../../../utils/styled'; import { isHideMenuKey } from '../../../utils/keyboardUtils'; import { GridColumnMenuContainerProps } from './GridColumnMenuProps'; import { gridClasses } from '../../../constants/gridClasses'; diff --git a/packages/x-data-grid/src/components/panel/GridPanel.tsx b/packages/x-data-grid/src/components/panel/GridPanel.tsx index 5e920533987aa..31d2ede49e3f4 100644 --- a/packages/x-data-grid/src/components/panel/GridPanel.tsx +++ b/packages/x-data-grid/src/components/panel/GridPanel.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { styled } from '@mui/material/styles'; import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils'; import ClickAwayListener from '@mui/material/ClickAwayListener'; import Paper from '@mui/material/Paper'; import Popper from '@mui/material/Popper'; +import { styled } from '../../utils/styled'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; @@ -38,6 +38,7 @@ const GridPanelRoot = styled(Popper, { slot: 'Panel', overridesResolver: (props, styles) => styles.panel, })<{ ownerState: OwnerState }>(({ theme }) => ({ + // @ts-ignore `@mui/material` theme.zIndex does not exist zIndex: theme.zIndex.modal, })); @@ -46,6 +47,7 @@ const GridPaperRoot = styled(Paper, { slot: 'Paper', overridesResolver: (props, styles) => styles.paper, })<{ ownerState: OwnerState }>(({ theme }) => ({ + // @ts-ignore `@mui/material` theme.vars does not exist backgroundColor: (theme.vars || theme).palette.background.paper, minWidth: 300, maxHeight: 450, diff --git a/packages/x-data-grid/src/components/panel/GridPanelContent.tsx b/packages/x-data-grid/src/components/panel/GridPanelContent.tsx index 0506f44f7b552..5b66c66d74a3e 100644 --- a/packages/x-data-grid/src/components/panel/GridPanelContent.tsx +++ b/packages/x-data-grid/src/components/panel/GridPanelContent.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { styled, SxProps, Theme } from '@mui/system'; import composeClasses from '@mui/utils/composeClasses'; +import { SxProps, Theme } from '@mui/system'; +import { styled } from '../../utils/styled'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx b/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx index 7744ad239b7d3..4dc0226889f8c 100644 --- a/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx +++ b/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { styled, SxProps, Theme } from '@mui/system'; import composeClasses from '@mui/utils/composeClasses'; +import { SxProps, Theme } from '@mui/system'; +import { styled } from '../../utils/styled'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx b/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx index 64cf34faf3736..d240aaaaa2380 100644 --- a/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx +++ b/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { styled, SxProps, Theme } from '@mui/system'; import composeClasses from '@mui/utils/composeClasses'; +import { SxProps, Theme } from '@mui/system'; +import { styled } from '../../utils/styled'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/components/panel/GridPanelWrapper.tsx b/packages/x-data-grid/src/components/panel/GridPanelWrapper.tsx index d1afe7d8f2920..6f2388bc3b6c1 100644 --- a/packages/x-data-grid/src/components/panel/GridPanelWrapper.tsx +++ b/packages/x-data-grid/src/components/panel/GridPanelWrapper.tsx @@ -2,9 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import FocusTrap, { TrapFocusProps } from '@mui/material/Unstable_TrapFocus'; -import { styled, Theme } from '@mui/material/styles'; +import { Theme } from '@mui/material/styles'; import { MUIStyledCommonProps } from '@mui/system'; import composeClasses from '@mui/utils/composeClasses'; +import { styled } from '../../utils/styled'; import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; @@ -50,15 +51,20 @@ const GridPanelWrapper = React.forwardRef const rootProps = useGridRootProps(); const classes = useUtilityClasses(rootProps); + const content = ( + // @ts-ignore `@mui/material` incompatible sx prop on GridPanelWrapperRoot + + ); + return ( - + {content} ); }, diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx index c30e5af630d01..99b9353712711 100644 --- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx @@ -6,8 +6,8 @@ import { unstable_capitalize as capitalize, } from '@mui/utils'; import { SelectChangeEvent } from '@mui/material/Select'; -import { styled } from '@mui/material/styles'; import clsx from 'clsx'; +import { styled } from '../../../utils/styled'; import { gridFilterableColumnDefinitionsSelector, gridColumnLookupSelector, diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx index 89d0a2114e331..9b935c738b584 100644 --- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx +++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { TextFieldProps } from '@mui/material/TextField'; import { refType, unstable_useId as useId } from '@mui/utils'; -import { styled } from '@mui/material/styles'; +import { styled } from '../../../utils/styled'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx index d88468fb9cd1b..911435c122def 100644 --- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx +++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { TextFieldProps } from '@mui/material/TextField'; import { SelectChangeEvent } from '@mui/material/Select'; import { unstable_useId as useId } from '@mui/utils'; -import { styled } from '@mui/material/styles'; +import { styled } from '../../../utils/styled'; import { GridFilterInputValueProps } from './GridFilterInputValueProps'; import { GridSingleSelectColDef } from '../../../models/colDef/gridColDef'; import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx index 2e286a44519d1..57963f42a2610 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { styled } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, @@ -9,6 +8,7 @@ import { import Badge from '@mui/material/Badge'; import { ButtonProps } from '@mui/material/Button'; import { TooltipProps } from '@mui/material/Tooltip'; +import { styled } from '../../utils/styled'; import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../../hooks/utils/useGridSelector'; import { gridFilterActiveItemsSelector } from '../../hooks/features/filter/gridFilterSelector'; diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx index 4921f12486ed7..c3d3ae1b2f352 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import TextField, { TextFieldProps } from '@mui/material/TextField'; -import { styled } from '@mui/material/styles'; import { unstable_debounce as debounce } from '@mui/utils'; import composeClasses from '@mui/utils/composeClasses'; +import { styled } from '../../utils/styled'; import { getDataGridUtilityClass } from '../../constants'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; @@ -37,6 +37,7 @@ const GridToolbarQuickFilterRoot = styled(TextField, { marginLeft: theme.spacing(0.5), }, '& .MuiInput-underline:before': { + // @ts-ignore theme.vars borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`, }, [`& input[type="search"]::-webkit-search-decoration, diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx index 90709353bf2b7..9642b4ca53803 100644 --- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx +++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import clsx from 'clsx'; -import { styled, SxProps, Theme } from '@mui/system'; import composeClasses from '@mui/utils/composeClasses'; +import { SxProps, Theme } from '@mui/system'; +import { styled } from '../../utils/styled'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { getDataGridUtilityClass } from '../../constants/gridClasses'; import { DataGridProcessedProps } from '../../models/props/DataGridProps'; diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx index 4ecd09eaf4f82..da5c929de4840 100644 --- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx +++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import clsx from 'clsx'; -import { styled, SxProps, Theme } from '@mui/system'; +import { SxProps, Theme } from '@mui/system'; import composeClasses from '@mui/utils/composeClasses'; +import { styled } from '../../utils/styled'; import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; import { useGridSelector } from '../../hooks/utils/useGridSelector'; import { gridRowsMetaSelector } from '../../hooks/features/rows'; diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index de3a72f4a8445..c3d2541efc1c1 100644 --- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; -import { styled, useTheme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; +import { styled } from '../../../utils/styled'; import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { useGridSelector } from '../../utils'; import { useGridRootProps } from '../../utils/useGridRootProps'; diff --git a/packages/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts index 1bb8284e5a270..b2304d392dda8 100644 --- a/packages/x-data-grid/src/internals/index.ts +++ b/packages/x-data-grid/src/internals/index.ts @@ -148,6 +148,7 @@ export { } from '../utils/domUtils'; export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils'; export * from '../utils/utils'; +export { styled } from '../utils/styled'; export { exportAs } from '../utils/exportAs'; export * from '../utils/getPublicApiRef'; export * from '../utils/cellBorderUtils'; diff --git a/packages/x-data-grid/src/utils/styled.ts b/packages/x-data-grid/src/utils/styled.ts new file mode 100644 index 0000000000000..cfc000ff4ecf1 --- /dev/null +++ b/packages/x-data-grid/src/utils/styled.ts @@ -0,0 +1,6 @@ +import { createStyled } from '@mui/system'; + +// Hardcoded theme id to avoid importing from `@mui/material` +const MATERIAL_THEME_ID = '$$material'; + +export const styled = createStyled({ themeId: MATERIAL_THEME_ID });