How can CustomizationProvider be used in a typescript Flex plugin?

[WillCKyle]

In my typescript plugin, I used CustomizationProvider exactly as described in this documentation: Customization Provider - Paste: The Design System for building Twilio customer experiences

Specifically, I used this code:

import {CustomizationProvider} from '@twilio-paste/core/customization'; 

import CustomTheme from './themes/theme.json'; 

const MyApp = () => ( 

<CustomizationProvider baseTheme="Default" theme={CustomTheme}> 

rest of app 

</CustomizationProvider> 

); 

And provided an empty theme object (for testing) in theme.json that matches the structure described in the documentation:

{ 

  "backgroundColors": {}... 

} 

However, the theme prop is reporting an error which prevents the plugin from compiling:

[TheSisb]

Hi @WillCKyle,

Looks like we have a small typo on our docs, woops! Fortunately it's an easy fix for you: replace baseTheme="Default" with baseTheme="default". The baseTheme value has to be all lowercase. We will fix it on our docs shortly.

Here's a codesandbox showing it works correctly now: https://codesandbox.io/s/paste-customization-provider-sample-sj83mp

[WillCKyle]

I actually caught that problem earlier and am currently using baseTheme='dark'. This doesn't fix the theme prop still returning the error.

[TheSisb]

Oh I see. There is a typing issue where we aren't loosely defining the iconSizes theme bucket. If you have an empty object for it, you can just exclude it. I'll work on loosening those types in the meantime.

ex:

const customTheme = {
  backgroundColors: {},
  // comment this one out
  // iconSizes: {},
  ....
}

[WillCKyle]

Thanks, removing that removed the error!