[charts] Fix themeAugmentation

packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx

@@ -94,6 +94,7 @@ const useUtilityClasses = <T extends ChartSeriesType>(ownerState: {
 
   const slots = {
     root: ['root'],
+    paper: ['paper'],
     table: ['table'],
     row: ['row'],
     cell: ['cell'],
@@ -124,12 +125,12 @@ const ChartsTooltipRoot = styled(Popper, {
  *
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
-function ChartsTooltip<T extends ChartSeriesType>(props: ChartsTooltipProps<T>) {
-  const themeProps = useThemeProps({
-    props,
+function ChartsTooltip<T extends ChartSeriesType>(inProps: ChartsTooltipProps<T>) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiChartsTooltip',
   });
-  const { trigger = 'axis', itemContent, axisContent, slots, slotProps } = themeProps;
+  const { trigger = 'axis', itemContent, axisContent, slots, slotProps } = props;
 
   const mousePosition = useMouseTracker();
 
@@ -140,7 +141,7 @@ function ChartsTooltip<T extends ChartSeriesType>(props: ChartsTooltipProps<T>)
   const tooltipHasData = getTooltipHasData(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
 
-  const classes = useUtilityClasses({ classes: themeProps.classes });
+  const classes = useUtilityClasses({ classes: props.classes });
 
   const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = useSlotProps({
@@ -170,7 +171,7 @@ function ChartsTooltip<T extends ChartSeriesType>(props: ChartsTooltipProps<T>)
   return (
     <NoSsr>
       {popperOpen && (
-        <PopperComponent {...popperProps}>
+        <PopperComponent {...popperProps} className={classes.root}>
           {trigger === 'item' ? (
             <ChartsItemTooltipContent
               itemData={displayedData as ItemInteractionData<T>}

packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts

@@ -8,6 +8,7 @@ import { chartsTooltipClasses } from './chartsTooltipClasses';
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container',
+  overridesResolver: (props, styles) => styles.paper,
 })(({ theme }) => ({
   boxShadow: theme.shadows[1],
   backgroundColor: (theme.vars || theme).palette.background.paper,
@@ -22,6 +23,7 @@ export const ChartsTooltipPaper = styled('div', {
 export const ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table',
+  overridesResolver: (props, styles) => styles.table,
 })(({ theme }) => ({
   borderSpacing: 0,
   '& thead td': {
@@ -35,6 +37,7 @@ export const ChartsTooltipTable = styled('table', {
 export const ChartsTooltipRow = styled('tr', {
   name: 'MuiChartsTooltip',
   slot: 'Row',
+  overridesResolver: (props, styles) => styles.row,
 })(({ theme }) => ({
   'tr:first-of-type& td': {
     paddingTop: theme.spacing(1),
@@ -50,6 +53,7 @@ export const ChartsTooltipRow = styled('tr', {
 export const ChartsTooltipCell = styled('td', {
   name: 'MuiChartsTooltip',
   slot: 'Cell',
+  overridesResolver: (props, styles) => styles.cell,
 })(({ theme }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
@@ -74,6 +78,7 @@ export const ChartsTooltipCell = styled('td', {
 export const ChartsTooltipMark = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Mark',
+  overridesResolver: (props, styles) => styles.mark,
   shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'color',
 })<{ color: string }>(({ theme, color }) => ({
   width: theme.spacing(1),

packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx

@@ -27,7 +27,7 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) {
       axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
 
   return (
-    <ChartsTooltipPaper sx={sx} className={classes.root}>
+    <ChartsTooltipPaper sx={sx} className={classes.paper}>
       <ChartsTooltipTable className={classes.table}>
         {axisValue != null && !axis.hideTooltip && (
           <thead>

packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx

@@ -43,7 +43,7 @@ function DefaultChartsItemTooltipContent<T extends ChartSeriesType = ChartSeries
     series.valueFormatter as CommonSeriesType<typeof value>['valueFormatter']
   )?.(value, { dataIndex: itemData.dataIndex });
   return (
-    <ChartsTooltipPaper sx={sx} className={classes.root}>
+    <ChartsTooltipPaper sx={sx} className={classes.paper}>
       <ChartsTooltipTable className={classes.table}>
         <tbody>
           <ChartsTooltipRow className={classes.row}>

packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts

@@ -6,6 +6,8 @@ import {
 export interface ChartsTooltipClasses {
   /** Styles applied to the root element. */
   root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
   /** Styles applied to the table element. */
   table: string;
   /** Styles applied to the row element. */
@@ -33,5 +35,5 @@ export function getChartsTooltipUtilityClass(slot: string) {
 }
 export const chartsTooltipClasses: ChartsTooltipClasses = generateUtilityClasses(
   'MuiChartsTooltip',
-  ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell'],
+  ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell'],
 );

packages/x-charts/src/themeAugmentation/overrides.d.ts

@@ -2,7 +2,6 @@ import { BarLabelClassKey } from '../BarChart';
 import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
 import { ChartsGridClassKey } from '../ChartsGrid';
-
 import { ChartsTooltipClassKey } from '../ChartsTooltip';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';