Help with integrating theme-ui and material-ui

[TheFirstMe]

( Related to #164 )

I have a Gatsby application that runs on theme-ui. I really love the API that comes with theme-ui. But at the same time I also want to use material-ui components inside my application. Can someone help me on how I would approach this problem?

In the end, I should be able to access theme-ui theme from the sx prop and it should be passed down to the material-ui components. I’m thinking of a transformer as mentioned in the above issue. Right now, I am using Gatsby plugins for theme-ui and material-ui but it requires two separate theme objects. If someone can give me ideas on how to transform theme-ui theme to material-ui theme, I could work on a PR

[clarkkozak]

Here's something that's helped me: https://theme-ui.com/use-theme-ui/

[TheFirstMe]

@clarkkozak Sounds good but I'll have to create a different theme object for different use cases. I was thinking of a transformer as mentioned in #164

[TheFirstMe]

@jxnblk Do you have any ideas? I was thinking of finding properties of material-ui theme object from the theme-ui one and do the corresponding mapping. What do you think?

[TheFirstMe]

material-ui also has a createMuiTheme function that creates their theme object. I think this can also be used.

[clarkkozak]

@TheFirstMe sounds perfect! Honestly though, I'd close this issue ASAP because it's more asking for help with coding rather than an issue with the code base. I suggest checking out a forum specifically centered around helping others code. For example: https://stackoverflow.com/

[TheFirstMe]

@clarkkozak That was my initial intention. But I'd also like to create a feature that does this for theme-ui if possible.

[clarkkozak]

@TheFirstMe right on :) well, if you make a fork, let me know and I'd love to help.

[TheFirstMe]

@clarkkozak I'll let you know. Thanks :)

[jxnblk]

If my understanding is correct, it should be possible to store your theme values canonically in Theme UI's format/schema, but use a transformer to accommodate Material UI's schema. I can see value in adding something like this as an optional package here in Theme UI, if you're interested in helping out.

I'd imagine the API could look something like the following:

import { jsx, 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>

[TheFirstMe]

@jxnblk One thing I found confusing from Theme UI's docs is that not all values are required in the schema but that's not the case in Material UI. I tried building a mock transformer using the createMuiTheme from Material UI's API and it works fine (not all values from Theme UI theme were used).

Should the transformer account for all possible values in Theme UI's schema that are relevant to Material UI's schema? There are also values in Material UI schema that are not relevant to Theme UI so those should be left untouched?

[jxnblk]

If Material UI requires all fields in its API, you could provide those as defaults (I'm surprised that library doesn't do that already 🤔)

[TheFirstMe]

I am not sure if they are absolutely required but they don't state that it's not in the docs unlike Theme UI. Also their default theme is generated using their createMuiTheme API. I suppose those fields are necessary because all components are styled based on those values.

[TheFirstMe]

My bad I just saw they are using the theme generated from that function by default so it's fine.

[TheFirstMe]

As I said above, there are fields used by Material UI that are not used by Theme UI. What should we do about them?

Here's the default theme used by Material UI:

{
   breakpoints: {
     keys: ["xs", "sm", "md", "lg", "xl"],
     values: {
       xs: 0,
       ... //remaining breakpoints
     },
     ..... //functions for media queries
   },
   mixins: {
     .... //for gutters and toolbar
   },
   palette: {
     common: {
       black: ..., //value for color
       white: ...,
     }
     type: "light", //light mode
     primary: {
       light: ...,
       main: ..., //only this field is required
       dark: ...,
       contrastText: ...,
     },
     ... //other intentions like secondary, error, success
     grey: {
       ... //different shades of grey
     },
     ...// functions to calculate other fields from intention.main
     //The rest of the palette properites are for light and dark mode
     text: {
       primary: ...,
       ...
     },
     divider: ...,
     background: {
       default: ...,
       paper: ...,
     },
     action: {
       active: ...,
       hover: ...,
       focus: ...,
       ...
     }
   },
   shadows: [...], //array of values for shadow
   typography: {
     htmlFontSize: 16,
     fontFamily: ..., //value for font-family
     fontWeightLight: 300,
     fontWeightRegular: 400,
     fontWeightMedium: 500,
     fontWeightBold: 700,
     //Below are variants h1,h2, button, caption, subtitle, body
     h1: {
       fontFamily: ... //calculated from above
       fontWeight: ...
       fontSize: ...
       lineHeight: ...
       letterSpacing: ...
     },
     ...
   },
   spacing: f(), // a function to create spacing. Can be replaced
                // by array of values like Theme UI
   shape: {
     borderRadius: 4
   },
   transitions: {
     ... //transition values
   },
   zIndex: {
     ... //z-index values for various components
   }
}

[jxnblk]

The only thing that looks like something not in Theme UI is the mixins (which I assume is some sort of functional values??). Was there anything specific that you're unsure of how to map?

[TheFirstMe]

@clarkkozak Here's the Theme UI theme:

{
  "breakpoints": [0, 600, 960, 1280, 1920],
  "space": [0, 4, 8, 16, 32, 64, 128, 256, 512],
  "fonts": {
    "body": '"Roboto", "Helvetica", "Arial", sans-serif',
    "heading": '"Roboto", "Helvetica", "Arial", sans-serif'
  },
  "fontSizes": [12, 14, 16, 20, 24, 32, 48, 64, 96],
  "fontWeights": {
    "body": 400,
    "heading": 700
  },
  "lineHeights": {
    "body": 1.5,
    "heading": 1.125
  },
  "colors": {
    "black": "#000",
    "white": "#fff",

    "primary": "#3f51b5",
    "secondary": "#f50057",
    "error": "#f44336",
    "warning": "#ff9800",
    "info": "#2196f3",
    "success": "#4caf50",

    "text": "rgba(0, 0, 0, 0.87)",
    "background": "#fafafa",

    "modes": {
      "dark": {
        "text": "#fff",
        "background": "#303030",
      }
    }
  },
  "zIndices": {
    "mobileStepper": 1000,
    "speedDial": 1050,
    "appBar": 1100,
    "drawer": 1200,
    "modal": 1300,
    "snackbar": 1400,
    "tooltip": 1500
  }
}

The default Material UI theme can be found here

The problems:

• fonts.body should be mapped to typography.fontFamily or/and typography.body1.fontFamily and typography.body2.fontFamily
• Theme UI supports both boxShadow and textShadow but Material UI only supports boxShadow in their theme. So the shadows theme key can't be used?
• There are some fields like mixins, transitions in Material UI which are not in Theme UI. Should we expose those fields throughout the Theme UI theme or somehow pass it only to Material UI theme?

[clarkkozak]

@TheFirstMe I see! I'll think about this over my weekend and see if I can think about what it would be like

EDIT:

Yet I don't think I'll be much help :P you have a great understanding of the problem, and I agree with @jxnblk. Something like <MaterialUIProvider> would be awesome to work with.

[TheFirstMe]

@clarkkozak I do have an idea on how <MaterialUIProvider> will look like. Material UI has their own Theme Provider which accepts a theme object like Theme UI. All we need is to figure out which values to transform to Material UI.

If we can do that, then all we need to do is pass that theme to their ThemeProvider?

EDIT:
There are slight differences between these two like colors.text used as a string value in Theme UI and palette.text is an object that has keys like primary and secondary. If its ok to use an object as a value for colors.text then things will get more simpler. @jxnblk Thoughts on this?

EDIT v2:
I saw that we can also use styles.root to style the body element. Then that'd solve the above issue. But since it's not mentioned in the docs that we can use objects values for colors.text and colors.background, I don't know if it's a violation of Theme UI spec or not.

EDIT v3:
I am not going to touch the colors key for now until I get an update. I'll work with the other keys.

[TheFirstMe]

I made a transformer that transforms almost all Theme UI fields to the Material UI with some additional fields that were not in the standard Theme UI object. But I left out some Material UI only fields for now because I need some input from others before I can continue on that. Can I start working on the package now?

[clarkkozak]

@TheFirstMe do you have a fork that we can look at? I'd love to see what you got!

[TheFirstMe]

@clarkkozak Here's the fork. But I am having trouble running it as a package. I suspect it's because I'm using @material-ui/core but haven't included it as a dependency (it's currently a peer dependency).

I haven't worked on a package before so I must be missing something here. Can you help me out?

Edit:
I did not publish the package so it’s installed from the local package. Could that be the issue?

Edit v2:
It's fixed now. I ran yarn pack and installed the package from the .tgz file.

[TheFirstMe]

@jxnblk @clarkkozak All set for opening a PR. I hope the fork is ok.

[clarkkozak]

@TheFirstMe Perhaps include an example of how it works in the README and write a test for it? I haven't read it closely yet double check the Contributions.md

EDIT: And your code looks clean and readable :) I like it, yet i have no authority in this project.

[TheFirstMe]

@clarkkozak Ah forgot about the README. Just added it to the fork. It's usage is how @jxnblk mentioned in his comment above:

import { jsx, 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>

I have never worked with Jest before so I'm not sure about the tests. I will try making one.

[jgoux]

Hi @TheFirstMe , is there anything blocking you from submitting the PR?
The code seems almost complete. 😄

[TheFirstMe]

@jgoux I see that each package needs its tests so I'm working on that right now. I'm new to testing so it's taking some time.

[zerubeus]

Hello, I just want to say this is a very good idea, I was just trying to do something similar until I found this issue

[TheFirstMe]

@zerubeus Can you check it out and suggest any improvements or if there are any bugs?

[clarkkozak]

@jxnblk have you checked this out? It works and seems like solid code.

[TheFirstMe]

@clarkkozak Sorry I forgot about this. The tests are incomplete though. If anyone can help me with those we can open a PR.