Add Theme UI to material-ui transformer

The material-ui library has its own, similar theming API. It’d be great to support using these components within a theme-ui application

[adamsoffer]

Thanks @lemes. What I’m doing for now is using theme-ui for everything and anywhere I need to use a material component I just manually get specific theme variables from theme-ui’s context and pass it to the material-ui theme. Basically, I’m doing this for now:

export default () => {
  const context = useThemeUI()

  // Apply theme-ui settings to material-ui component
  const muiTheme = createMuiTheme({
    palette: {
      primary: {
        main: context.theme.colors.background
      },
      secondary: {
        main: context.theme.colors.grey[3]
      },
      ...
    }
  })

  return (
    <div>
      <MuiThemeProvider theme={muiTheme}>
        <MaterialTable />
      </MuiThemeProvider>
    </div>
  )
}

[jxnblk]

Yeah, ideally there would be a utility/component to use Material UI components within a Theme UI application, where the theme object is defined once in the standard format and used in multiple places. This should negate the need to manually map from one object to the other

An API for this could look something like this:

import React from 'react'
import { ThemeProvider } from 'theme-ui'
import { MaterialUIProvider } from '@theme-ui/material-ui'
import theme from './theme'

export default props =>
  <ThemeProvider theme={theme}>
    <MaterialUIProvider>
      {props.children}
    </MaterialUIProvider>
  </ThemeProvider>