[charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367)

Author: bernardobelchior

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.tsx

@@ -40,6 +40,10 @@ const ZoomSliderActiveTrackRect = styled('rect', {
       props: { preview: true },
       style: {
         fill: 'transparent',
+        // Increases the specificity to override the default fill
+        ...theme.applyStyles('dark', {
+          fill: 'transparent',
+        }),
         rx: 4,
         ry: 4,
         stroke: theme.palette.grey[500],

test/regressions/charts/ZoomSliderPreview.tsx

@@ -3,6 +3,10 @@ import { XAxis } from '@mui/x-charts/models';
 import { BarChartPro, BarChartProProps } from '@mui/x-charts-pro/BarChartPro';
 import { shareOfRenewables } from 'docsx/data/charts/dataset/shareOfRenewables';
 import { countryData } from 'docsx/data/charts/dataset/countryData';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { Stack } from '@mui/material';
+
+const darkTheme = createTheme({ palette: { mode: 'dark' } });
 
 const percentageFormatter = new Intl.NumberFormat(undefined, {
   style: 'percent',
@@ -31,15 +35,19 @@ const barSettings = {
 
 export default function ZoomSliderPreview() {
   return (
-    <BarChartPro
-      {...barSettings}
-      xAxis={[
-        {
-          ...barXAxis,
-          zoom: { filterMode: 'discard', slider: { enabled: true, preview: true } },
-        },
-      ]}
-      zoomData={[{ axisId: 'x', start: 10, end: 30 }]}
-    />
+    <ThemeProvider theme={darkTheme}>
+      <Stack width="100%" sx={(theme) => ({ background: theme.palette.background.default })}>
+        <BarChartPro
+          {...barSettings}
+          xAxis={[
+            {
+              ...barXAxis,
+              zoom: { filterMode: 'discard', slider: { enabled: true, preview: true } },
+            },
+          ]}
+          zoomData={[{ axisId: 'x', start: 10, end: 30 }]}
+        />
+      </Stack>
+    </ThemeProvider>
   );
 }