Property Does not exist despite null coalescing and optional chaining

userklvi1 0
Viewed 22

I have a piece of code on which I do optional chaining and also null coalescing.

I don't understand why it still complains about property not existing as shown in the image below

The error message is

TS2339: Property 'drawer' does not exist on type '{}'.

export const AppBar = styled(BaseAppBar, {
  shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>(({ theme }) => ({
  zIndex: theme?.zIndex?.drawer ?? 2,
}));

AppBar.defaultProps = {
  color: "primary",
};

Image

material-ui typescript javascript
1 Answers

The error says 'drawer' does not exist on type '{}', that's mean the zIndex has the type of empty object, you need to define the type of zIndex inside the theme globally or use as to do type assertion.

export const AppBar = styled(BaseAppBar, {
  shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>(({ theme }) => ({
  zIndex: (theme?.zIndex as { drawer: number }).drawer ?? 2,
}));
userYBSN0
Related