Extend interface from another - MUI

Question

I have an interface

interface ThemeBase {
  colors: {
    [key: string]: Color;
  };
  borderRadius: {
    base: string;
    mobile: string;
  };
  navbar: {
    'z-index': number;
  };
  typography: {
    rootBase: string;
    fontBase: string;
  };
}

And I want to extend MUI theme with this interface. This solution work for me:

declare module '@material-ui/core/styles/createMuiTheme' {
  interface Theme extends ThemeBase {}
  // allow configuration using `createMuiTheme`
  interface ThemeOptions extends ThemeBase {}
}

But I have an error from eslint

error An interface declaring no members is equivalent to its supertype @typescript-eslint/no-empty-interface

How to fix this without code duplication for Theme and ThemeOptions

Answer 1

This is one of those few examples where it's completely fine IMO to just put /* eslint-ignore @typescript-eslint/no-empty-interface */ in the first line. While I wouldn't do it in regular code, module augmentation is a bit of a different beast, there's no point trying to find a workaround here.