Bug: error message React does not recognize the slotProps prop on a DOM element when using LineCharts

[nekomeowww]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Directly be able to reproduce in CodeSandbox and StackBlitz playground links from the current x-charts documentation here.

Or you can click the links below (no edited).

• https://codesandbox.io/s/rtz9m5?file=/Demo.tsx
• https://stackblitz.com/run?file=Demo.tsx

Steps:

1. Open the developer tool to see the error message.

Current behavior 😯

The lines of the charts are able to plotted and drew correctly, however React would complain about the React does not recognize the slotProps prop on a DOM element error when developing.

Warning: React does not recognize the `slotProps` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `slotprops` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at g
    at MarkPlot (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/x-charts@6.0.0-alpha.7/LineChart/MarkPlot.js:20:5)
    at svg
    at eval (https://vwzfun--run.stackblitz.io/turbo_modules/@emotion/react@11.11.1/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at ChartsSurface (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/x-charts@6.0.0-alpha.7/ChartsSurface.js:23:7)
    at HighlightProvider (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/x-charts@6.0.0-alpha.7/context/HighlightProvider.js:44:3)
    at InteractionProvider (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/x-charts@6.0.0-alpha.7/context/InteractionProvider.js:46:3)
    at CartesianContextProvider (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/x-charts@6.0.0-alpha.7/context/CartesianContextProvider.js:46:10)
    at SeriesContextProvider (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/x-charts@6.0.0-alpha.7/context/SeriesContextProvider.js:70:3)
    at DrawingProvider (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/x-charts@6.0.0-alpha.7/context/DrawingProvider.js:32:3)
    at ChartContainer (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/x-charts@6.0.0-alpha.7/ChartContainer/index.js:21:5)
    at div
    at eval (https://vwzfun--run.stackblitz.io/turbo_modules/@emotion/react@11.11.1/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at ResponsiveChartContainer (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/x-charts@6.0.0-alpha.7/ResponsiveChartContainer/index.js:104:14)
    at LineChart (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/x-charts@6.0.0-alpha.7/LineChart/LineChart.js:27:5)
    at BasicLineChart
    at StyledEngineProvider (https://vwzfun--run.stackblitz.io/turbo_modules/@mui/styled-engine@5.13.2/node/StyledEngineProvider/StyledEngineProvider.js:26:5)

Expected behavior 🤔

No error messages prompted by React just like bar charts.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.4.1
  Binaries:
    Node: 16.20.0 - ~/.volta/tools/image/node/16.20.0/bin/node
    Yarn: 3.6.1 - ~/.volta/tools/image/yarn/3.6.1/bin/yarn
    npm: 8.19.4 - ~/.volta/tools/image/node/16.20.0/bin/npm
  Browsers:
    Chrome: 115.0.5790.170
    Edge: 115.0.1901.203
    Safari: 16.5.2
  npmPackages:
    @emotion/react: ^11.11.0 => 11.11.0 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/lab: 5.0.0-alpha.130 => 5.0.0-alpha.130 
    @mui/material: ^5.13.0 => 5.13.0 
    @mui/x-charts: 6.0.0-alpha.7 => 6.0.0-alpha.7 
    @mui/x-date-pickers: ^6.11.1 => 6.11.1 
    @types/react: ^17.0.58 => 17.0.58 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^5.0.4 => 5.0.4

Order ID or Support key 💳 (optional)

No response

[alexfauquette]

Thanks for reporting this issue, effectively, there is an issue with props propagation 👍