Is a typescript module augmentation automatically exported in a component library?

Viewed 363

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.

error

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?

0 Answers
Related