2

I am using lerna to create multiple UI packages.

I am augmenting @material-ui/styles in package a to add more palette and typography definitions. I am able to get the new types in package a.

Package b is a component which uses material-ui's component and makeStyles function, however, I don't have access to the new types declared in package a.

Of course I installed package a in package b, tried importing the module in the file where I create the styles with no help. Also I tried specifing "path" for material-ui in package b tsconfig, but again, no help.

But if I try to import package a in package b.

Anybody tried something like this with success?

We are working on a private repo so I can't share it, but if needed I will provide another repo demonstrating the issue.

DiabolousL
  • 31
  • 1
  • 3

3 Answers3

0

I managed to solve it by exporting material-ui's theme from the file I augmented the theme in package a, and the export it out of the package. In package b I just had to specify the path in the tsconfig for it to know about the extra types.

DiabolousL
  • 31
  • 1
  • 3
  • So you didn't actually share the module augmentation, right? Instead, you exported modified types from one package and imported them to other packages using tsconfig paths? – Jacob Fredericksen Jan 19 '23 at 04:11
0

I had the same issue as OP, and OP's answer led me to the solution, but I found it a bit hard to understand.

Here's how I solved it.

Anywhere in a TS file in package a:

declare module "@mui/material/styles" {
  interface Palette {
    brand: PaletteColor;
  }

  interface PaletteOptions {
    brand?: PaletteColorOptions;
  }
}

in package b's tsconfig.json:

{
  "compilerOptions": {
    ...  
    "paths": {
      "@mui/material/*": [
        "./node_modules/package-a/*",
        "./node_modules/@mui/material/*"
      ]
    }
  }
}

Note that you may need to restart your TypeScript server or IDE.

Armand Bernard
  • 449
  • 1
  • 3
  • 12
0

For me, importing the file with a Module Augmentation in the consuming project fixed the issue.

Add this line to your consuming project

import "@my-package/theme/base";

In src/theme/base.ts

declare module "@mui/material/styles" {
  interface Theme {...}
}
starball
  • 20,030
  • 7
  • 43
  • 238
keiohtani
  • 37
  • 4