withStyles uses Mui theme type, causing errors when using augmented palette

[seigler]

This code works, but gives a TypeScript error Property 'medium' does not exist on type 'Color'.ts(2339)

const StyledCard = withStyles((theme) => ({
  root: {
    border: `2px dashed ${theme.palette.grey.medium}`
  }
}))(Card)

[WilliamKelley]

Are you importing withStyles from @prenda/spark? or @material-ui/core?

[WilliamKelley]

The core problem is that our module augmentation doesn't seem to be carrying over to your project. Maybe module augmentations don't extend outside of an npm package.

A possible solution could be re-exporting the Theme type, and consumers importing that to type theme usages. However that's annoying, and I don't have much confidence it would actually solve the issue of augmentations not carrying over. Maybe if we re-export in the same file that we augment it'll have a tighter association? I have no idea really.

I'd like to be able to reproduce this internally to assess solutions.

We might have to re-type withStyles and associated theme accessing utilities so that our augmented theme takes precedence.

[WilliamKelley]

Or the last resort is to advise consumers to copy our augmentations to their project...

[seigler]

Are you importing withStyles from @prenda/spark? or @material-ui/core?

Importing withStyles from @prenda/spark. In my case, Spark exporting a re-typed version of those utility functions ought to solve the problem.

[WilliamKelley]

I stumbled across the fact that Mui Lab asks consumers to import a directory path which specifically contains augmentations in order for them to take effect in the consuming project. https://material-ui.com/components/about-the-lab/#typescript

[WilliamKelley]

@seigler Can you try adding this to your file and see if it works? I looked at the bundle, and it seems that typescript definition files, *.d.ts, are preserved for inidividual files, so it should work.

import type {} from '@prenda/spark/styles/palette';

[seigler]

How about that, it does work. Thanks @WilliamKelley

[WilliamKelley]

How about that, it does work. Thanks @WilliamKelley

Sweet! That works for now.

Eventually we can close this issue once recording this instruction in a README, and maybe centralizing our augmentations so it's one import and not many.

[DapperFox]

Still need to import type {} from '@prenda/spark/theme/palette' to get colors to work ie theme.palette.red[1]