Warning: Failed prop type: The following props are not supported: `className`. Please remove them.

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

This is my code:

import { Grid } from "@mui/material";
import { styled } from "@mui/material/styles";
import { IBreadcrumbProps } from "./Breadcrumb.types";
import { B500 } from "../colors/Colors";
import { Item } from "./components/Item";
import { createGenerateClassName, StylesProvider } from "@mui/styles";

const PREFIX = "Breadcrumb";

const classes = {
  breadcrumb: `${PREFIX}-breadcrumb`,
};

const StyledStylesProvider = styled(StylesProvider)({
  [`& .${classes.breadcrumb}`]: {
    background: "red",
    "& > svg, & > svg > g > use": {
      fill: `#${B500}`,
      height: "16px",
      width: "16px",
    },
  },
});

const breadcrumb = createGenerateClassName({
  seed: "breadcrumb",
});

export const Breadcrumb = ({ icon, children, style }: IBreadcrumbProps) => {
  return (
    <StyledStylesProvider generateClassName={breadcrumb}>
      <Grid
        container
        alignItems="center"
        className={classes.breadcrumb}
        style={style}
      >
        {icon}
        {children}
      </Grid>
    </StyledStylesProvider>
  );
};

Warning:

Is className deprecated? I saw an example of this here: https://mui.com/guides/migration-v4/#migrate-from-jss

What should I use to replace it? Because also with this approach my styles are not being applied:

Expected behavior 🤔

Styles work as expected and no warnings should be present

Steps to reproduce 🕹

No response

Context 🔦

I am migrating from v4 to v5 following Material Official Guide.

Your environment 🌎

No response

[mnajdova]

This command is the one that styles StylesProvider. Maybe it will be great if you make some changes to the command to NOT style the context provider.

Aah ok, I see thanks for pointing this out. @siriwatknp up to you. I don’t think it’s critical, but maybe worth considering

[BiancaArtola]

I understand the solution, thanks for giving me the information. This issue appears when I ran npx @mui/codemod v5.0.0/jss-to-styled .\src\Breadcrumb\ This command is the one that styles StylesProvider. Maybe it will be great if you make some changes to the command to NOT style the context provider.

Anyway, for me, the issue is fixed. I will close this. Thanks for helping me @mnajdova