Property Does not exist despite null coalescing and optional chaining

Question

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

Answer 1

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,
}));