[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)',
                    },
                    [`&.${linkClasses.disabled}`]: {
                        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]

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.