import deepMerge from 'deepmerge' ; import type { FunctionComponent } from 'react' ; import type { Theme } from '../types' ; import type { ThemeProviderProps } from './ThemeProvider' ; import ThemeProvider from './ThemeProvider' ; const overridesCompactTheme = { typography : { h2 : { fontSize : '20px' , lineHeight : '24px' , breakpoints : { laptop : { fontSize : '24px' , lineHeight : '30px' , } , } , } , h3 : { fontSize : '18px' , lineHeight : '23px' , breakpoints : undefined , } , h4 : { fontSize : '14px' , lineHeight : '17px' , breakpoints : { laptop : { fontSize : '16px' , lineHeight : '20px' , } , } , } , p : { fontSize : '16px' , lineHeight : '20px' , breakpoints : undefined , } , a : { fontSize : '16px' , lineHeight : '20px' , breakpoints : undefined , } , } , } ; example const CompactThemeProvider = ( { overrides : passedOverrides , deep = true , children , ... otherProps } ) => { const overrides = passedOverrides ? deep ? deepMerge ( overridesCompactTheme , passedOverrides ) : { ... overridesCompactTheme , ... passedOverrides } : overridesCompactTheme ; return ( < ThemeProvider { ... otherProps } overrides = { overrides } deep = { deep } > { children } < /ThemeProvider>); } ; export default CompactThemeProvider ;