Material UI + styled with props throws "React does not recognize zIndex prop on a DOM element."

Question

I'm struggling with React error -> React does not recognize zIndex prop on a DOM element. It happens when I'm using MUI component and Styled with props.

Code example:

styled:

import {Drawer as DrawerBase, styled} from '@material-ui/core'

interface DrawerProps {
  zIndex: number
}
export const Drawer = styled(DrawerBase)<Theme, DrawerProps>(({zIndex}) => ({
  zIndex
}))

implementation:

<Drawer zIndex={10} />

I'm using: "@material-ui/core": "^4.12.3"

Is there any possibility to prevent passing props to DOM elements?

Answer 1

I've not used styled components within MUI before, so take what I'm saying with a grain of salt. But I have a few ideas:

You're importing styled from '@material-ui/core', but you're calling a style function (without the "d").

Looking at the MUI docs for using styled components, they're using it the way we traditionally use styled components, which is using CSS syntax. I'd expect your code to look like this:

const Drawer = styled(DrawerBase)`
  z-index: ${props => props.zIndex};
`;

The DOM element needs "z-index", not "zIndex".

Your code snippet also has a typo with your const Drawer where you've left out the "s": cont.

Hopefully this helps.