[charts] Add ChartsGrid to themeAugmentation (mui#13026)

DungTiger · Jul 23, 2024 · cf69180 · cf69180
1 parent ef692fe
commit cf69180
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 11 deletions.
diff --git a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { useTicks } from '../hooks/useTicks';
@@ -14,13 +14,21 @@ import {
 const GridRoot = styled('g', {
   name: 'MuiChartsGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root,
+  overridesResolver: (props, styles) => [
+    { [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine },
+    { [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine },
+    styles.root,
+  ],
+})({});
+
+const GridLine = styled('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line,
 })(({ theme }) => ({
-  [`& .${chartsGridClasses.line}`]: {
-    stroke: (theme.vars || theme).palette.divider,
-    shapeRendering: 'crispEdges',
-    strokeWidth: 1,
-  },
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1,
 }));
 
 const useUtilityClasses = ({ classes }: ChartsGridProps) => {
@@ -58,10 +66,12 @@ export interface ChartsGridProps {
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
 function ChartsGrid(props: ChartsGridProps) {
-  const { vertical, horizontal, ...other } = props;
+  const themeProps = useThemeProps({ props, name: 'MuiChartsGrid' });
+
+  const { vertical, horizontal, ...other } = themeProps;
   const { xAxis, xAxisIds, yAxis, yAxisIds } = React.useContext(CartesianContext);
 
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(themeProps);
 
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];
@@ -85,7 +95,7 @@ function ChartsGrid(props: ChartsGridProps) {
     <GridRoot {...other} className={classes.root}>
       {vertical &&
         xTicks.map(({ formattedValue, offset }) => (
-          <line
+          <GridLine
             key={`vertical-${formattedValue}`}
             y1={yScale.range()[0]}
             y2={yScale.range()[1]}
@@ -96,7 +106,7 @@ function ChartsGrid(props: ChartsGridProps) {
         ))}
       {horizontal &&
         yTicks.map(({ formattedValue, offset }) => (
-          <line
+          <GridLine
             key={`horizontal-${formattedValue}`}
             y1={offset}
             y2={offset}

diff --git a/packages/x-charts/src/themeAugmentation/components.d.ts b/packages/x-charts/src/themeAugmentation/components.d.ts
@@ -18,6 +18,10 @@ export interface ChartsComponents {
   MuiChartsClipPath?: {
     defaultProps?: ComponentsProps['MuiChartsClipPath'];
   };
+  MuiChartsGrid?: {
+    defaultProps?: ComponentsProps['MuiChartsGrid'];
+    styleOverrides?: ComponentsOverrides['MuiChartsGrid'];
+  };
   MuiChartsLegend?: {
     defaultProps?: ComponentsProps['MuiChartsLegend'];
     styleOverrides?: ComponentsOverrides['MuiChartsLegend'];

diff --git a/packages/x-charts/src/themeAugmentation/overrides.d.ts b/packages/x-charts/src/themeAugmentation/overrides.d.ts
@@ -1,6 +1,7 @@
 import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisClassKey } from '../ChartsAxis';
 import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
+import { ChartsGridClassKey } from '../ChartsGrid';
 import { ChartsLegendClassKey } from '../ChartsLegend';
 import { ChartsTooltipClassKey } from '../ChartsTooltip';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';
@@ -9,6 +10,7 @@ import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '.
 export interface PickersComponentNameToClassKey {
   MuiChartsAxis: ChartsAxisClassKey;
   MuiChartsAxisHighlight: ChartsAxisHighlightClassKey;
+  MuiChartsGrid: ChartsGridClassKey;
   MuiChartsLegend: ChartsLegendClassKey;
   MuiChartsTooltip: ChartsTooltipClassKey;
 

diff --git a/packages/x-charts/src/themeAugmentation/props.d.ts b/packages/x-charts/src/themeAugmentation/props.d.ts
@@ -3,6 +3,7 @@ import { BarElementProps } from '../BarChart/BarElement';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsClipPathProps } from '../ChartsClipPath';
+import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsLegendProps } from '../ChartsLegend';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { ChartsTooltipProps } from '../ChartsTooltip';
@@ -18,6 +19,7 @@ export interface ChartsComponentsPropsList {
   MuiChartsYAxis: ChartsYAxisProps;
   MuiChartsAxisHighlight: ChartsAxisHighlightProps;
   MuiChartsClipPath: ChartsClipPathProps;
+  MuiChartsGrid: ChartsGridProps;
   MuiChartsLegend: ChartsLegendProps;
   MuiChartsTooltip: ChartsTooltipProps;
   MuiChartsSurface: ChartsSurfaceProps;