[joy-ui] How to customize the JoyBreadcrumbs item color

[rick-liyue-huang]

Steps to reproduce

Link to live example: (required)

Steps:

1. I'm now hoping to customize the JoyBreadcrumbs item color;
2. I try to use codes like the following content:

   export const raulandAdvancedThemes = extendTheme({
   cssVarPrefix: 'test',
   colorSchemes,
   radius,
   typography,
   fontFamily,
   breakpoints,
   components: {
       JoyBreadcrumbs: {
           styleOverrides: {
               root: ({ theme, ownerState }) => ({
                   // color: 'var(--rauland-palette-illustrate-300)',
                   '& .MuiBreadcrumbs-separator': {
                       color: 'var(--rauland-palette-illustrate-300)',
                   },
                   '& .MuiBreadcrumbs-li': {
                       backgroundColor: 'white',
                       color: 'red', 
                   },
                   backgroundColor: 'var(--rauland-palette-illustrate-100)',
                   '&:hover': {
                       color: 'var(--rauland-palette-illustrate-50)',
                       backgroundColor: 'var(--rauland-palette-illustrate-200)',
                   },
                   '&:active': {
                       color: 'var(--rauland-palette-illustrate-50)',
                       backgroundColor: 'var(--rauland-palette-illustrate-200)',
                   },
                       color: 'var(--rauland-palette-neutral-300)',
                   },
               }),
           },
       },
   },
   })

3. I found that '& .MuiBreadcrumbs-li': { backgroundColor: 'white', color: 'red', } color: 'red' is not woking properly

Current behavior

the '& .MuiBreadcrumbs-li': { backgroundColor: 'white', color: 'red', } color: 'red' not work properly

Expected behavior

hope that the items in the Breadcrumbs Show items with red color

Context

react 18, vite,

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: JoyBreadcrumbs, customize, .MuiBreadcrumbs-li Order ID: 97037

Search keywords:

[siriwatknp]

@rick-liyue-huang Can you provide a reproducible CodeSandbox?

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.