Material UI - Module Augmentation from NPM Package

Question

I'm working on setting up a package to use for my @mui/material theme. I want to have a package @my/theme that will have all my MUI related style overrides and my theme so that I can install that and use my theme everywhere. The package itself exports a MyThemeProvider which is basically a wrapper that creates my theme and wraps the children in the ThemeProvider.

The code works fine in terms of using the theme, but where I'm running into trouble is with the declaration merging.

The Material UI docs specify that you can create overrides for different variants of a button for example as follows:

declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
        primary: true;
        secondary: true;
    }
    interface ButtonPropsColorOverrides {
        dark?: boolean;
    }
}

This works great from within the @my/theme package itself when developing, but when I install the package and consume it from my front-end, it doesn't read the declaration merging. I've figured out some ways around it (using typeRoots or adding /// <reference types="@my/theme" /> into an index.d.ts file) but I'd rather not have the onus be on the consumer to configure this. I assume there is a way to bundle the declaration merging with the type definitions that I have for the package.

I have my type definitions output into a types folder and my package.json file has the following:

  "types": "./types/index.d.ts",

Inside types/index.d.ts I have the declaration merging code:

// /types/index.d.ts
export type SomeType = string;

declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
        primary: true;
        secondary: true;
    }
    interface ButtonPropsColorOverrides {
        dark?: boolean;
    }
}

Even with these type declarations being in the file that the package points to for type declarations, it seems the consumer does not pick up on the declaration merging.

What am I doing wrong here, and how can I get declaration merging from within a node_modules package into the consumer automatically?

Material UI - Module Augmentation from NPM Package

0 Answers0