jschr / theme-provider Goto Github PK

<ThemeProvider theme={parentTheme} vars={props.vars}>
  <ThemeProvider theme={childTheme} vars={props.vars.child}>
        
  </ThemeProvider>
</ThemeProvider>

const createStyles = (theme) => ({ 
  container: (props) => ({
     ...
  })
})

const Component = ({ styles, ...props }) => (
  <div {...styles.container(props)} />
)

function createStyles(theme, props) {
  insertGlobal('html', {
    fontSize: `${theme.baseFontSize}px`
  })

  insertGlobal(props.rootSelector, {
    height: '100%'
  }
}

export default withStyles(createStyles)(Global)

function createStyles(theme, props) {
  return {
    backgroundColor: theme.primaryColor,
    padding: props.large ? '2em' : '1em'
  }
}

function shouldUpdateStyles(theme, props, nextTheme, nextProps) {
  return (
    theme.primaryColor !== nextTheme.primaryColor &&
    props.large !== nextProps.large
  )
}

...

export default withStyles(createStyles, shouldUpdateStyles)(Component)