import * as React from 'react' ; import { Component , ReactNode } from 'react' ; import { CacheProvider } from '@emotion/react' ; import createCache from '@emotion/cache' ; import memoizeOne from 'memoize-one' ; interface NonceProviderProps { nonce : string ; children : ReactNode ; cacheKey : string ; } export default class NonceProvider extends Component < NonceProviderProps > { constructor ( props ) { super ( props ) ; this . createEmotionCache = memoizeOne ( this . createEmotionCache ) ; } createEmotionCache = ( nonce , key ) => { return createCache ( { nonce , key } ) ; } ; render ( ) { const emotionCache = this . createEmotionCache ( this . props . nonce , this . props . cacheKey ) ; return ( < CacheProvider value = { emotionCache } > { this . props . children } < /CacheProvider>); } }