React does not recognize the breadCrumbs prop on a DOM element. PageContainer

[alfi-dim]

Steps to reproduce

Link to live example: (required)

Steps:

1. Create custom content wrapper using PageContainer
2. Adding "breadcrumbs" on PageContainer as "breadcrumbs" props is not work, but it works when adding as "breadCrumbs" props but got warning

Current behavior

Expected behavior

it should not give warning when adding breadCrumbs props, or if it really using breadcrumbs is the right way, it should render the breadcrumbs

Context

the code

export default function ContentWrapper({ pageProps, centered, children }) {
  const { title, breadcrumbs } = pageProps;

  const classNames= `flex flex-col ${centered ? 'items-center' : ''} gap-2 border-t pt-2 border-t-gray-400`
  return (
    <PageContainer
      title={title}
      breadCrumbs={breadcrumbs}
    >
      <section className={classNames}>
        {children}
      </section>
    </PageContainer>
  )
}

page when add breadCrumbs props

page when add breadcrumbs props

in case you wonder what that error box on nextjs looks like

Your environment

npx @mui/envinfo

    System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 18.20.4 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (129.0.2792.52) (MS Edge Version 129.0.2792.65 (Official build) (64-bit))
  npmPackages:
    @emotion/react:  11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/base:  5.0.0-beta.58
    @mui/core-downloads-tracker:  6.1.1
    @mui/icons-material: ^6.1.1 => 6.1.1
    @mui/lab: ^6.0.0-beta.10 => 6.0.0-beta.10
    @mui/material: ^6.1.1 => 6.1.1
    @mui/material-nextjs: ^6.1.1 => 6.1.1
    @mui/private-theming:  6.1.1
    @mui/styled-engine:  6.1.1
    @mui/system:  6.1.1
    @mui/types:  7.2.17
    @mui/utils:  6.1.1
    @mui/x-data-grid: ^7.18.0 => 7.18.0
    @mui/x-internals:  7.18.0
    @toolpad/core: ^0.7.0 => 0.7.0
    @toolpad/utils:  0.7.0
    @types/react:  18.3.10
    react: ^18 => 18.3.1
    react-dom: ^18 => 18.3.1
    typescript:  5.6.2

Search keywords: pagecontainer

[Janpot]

@alfi-dim That reproduction links to a preview, can you share the actual codesandbox so that I can inspect the code?

Ok, I could reproduce, thank you for reporting. Fixing it in #4189. Just a heads up that we're going to rename this property to breadcrumbs (lowercase c) for more consistent naming between MUI libraries.

[alfi-dim]

Alright thanks, I'll update to you later to see if the issue is still persist.

Have a nice day.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @alfi-dim! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!