Theme-ui: Add Theme UI to material-ui transformer

[jxnblk]

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

[lemes]

I want to help with that! I've been wanting a better style api for material-ui for so long and once I saw theme-ui I was like: This is it!

Where do I get started?

[jxnblk]

I think it'd be a matter of looking at the material-ui docs to understand the shape of what's needed for that library and creating a transformer function that takes a theme-ui theme object and outputs that format. The @theme-ui/typography or @theme-ui/tachyons packages are probably the closest thing currently in this repo, but this one could potentially integrate with their css-in-js/context setup as well. This could also benefit from #85 if that's at all interesting to work on

[adamsoffer]

Hey @jxnblk - until something like this gets built, I'm curious, how would you personally go about using material-ui components inside a project that uses styled-system or theme-ui? Or would you just recommend using Material's system package for now?

[jxnblk]

@adamsoffer I haven't used Material UI myself, so I'm not sure. I believe they use JSS (which I also haven't used), but I suspect it should be compatible with Styled System

[lemes]

@adamsoffer if I understood correctly, one would still use Material-UI as it is but when wanting to update the theme, do it through theme-ui. The utility would parse the theme-ui object into Material-UI theme object.

[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>

[adamsoffer]

Nice. Yeah, that would be sweet.

[adamsoffer]

@lemes - did you by any chance take a stab at this?

[lemes]

@adamsoffer I didn't 😞but please do fell free to try it.

[jxnblk]

Closing this out since there hasn't been much traction here -- feel free to open a new issue or PR if anyone wants to look into this