I created a component library using material-ui and Typescript under the hood. I have used Typescript module augmentation in order to add new options to the theme, as described in their theme customization with Typescript documentation.
// createPalette.d.ts/* eslint-disable @typescript-eslint/no-unused-vars */
import { Palette, PaletteOptions } from "@material-ui/core/styles/createPalette";
declare module "@material-ui/core/styles/createPalette" {
interface Palette {
highlight: PaletteColor;
layout: LayoutPaletteColor;
}
interface PaletteOptions {
highlight: PaletteColorOptions;
layout?: LayoutPaletteColor;
}
interface LayoutPaletteColorOptions {
paper: string;
text: string;
}
interface SidebarPaletteColorOptions extends LayoutPaletteColorOptions {
navItemSelectedBg: string;
navItemSelectedColor: string;
}
interface LayoutPaletteColor {
header: LayoutPaletteColorOptions;
sidebar: SidebarPaletteColorOptions;
footer: LayoutPaletteColorOptions;
}
}
Then, I build my project and publish it to Github packages. I'm also using this script which copies the *.d.ts files to the dist folder
"copy-typings": "copyfiles -u 1 \"./src/types/*.d.ts\" dist",
When I install the package in another project and reference the Header, for example, I get this error
Cannot read property 'header' of undefined which points at the line where the theme.palette.layout.header.paper is referenced.
This makes me believe that my createPalette.d.ts is only being effective on the component library itself, but not when the components are being used in another project.
How to export this module augmentation? Or how to make this work?
