jsx import React from 'react' ; import { CSSObject , jsx } from '@emotion/core' ; import { GlobalStyle } from '../GlobalStyle' ; import { filterProps } from '../util' ; import { THEME_ID , Theme , ThemeProvider } from './Theme' ; export interface StyledAppContainerProps < T = HTMLDivElement > extends React . HTMLProps < T > { backgroundColor ? : string ; themeId ? : THEME_ID ; } const styledAppContainerStyle = ( theme , { backgroundColor = theme . general . backgroundColor } ) => ( { background : backgroundColor , transition : 'background 0.15s' , } ) ; const filterStyledAppContainerProps = ( props ) => filterProps ( props , [ 'backgroundColor' , 'themeId' ] ) ; const StyledAppContainer = ( props ) => ( < div css = { theme => styledAppContainerStyle ( theme , props ) } { ... filterStyledAppContainerProps ( props ) } />); export const StyledApp = ( { themeId = THEME_ID . LIGHT , children , ... props } ) => ( < ThemeProvider themeId = { themeId } > < StyledAppContainer { ... props } > < GlobalStyle /> { children } < /StyledAppContainer> < /ThemeProvider>);