Material-ui: [styles] custom theme variables with makeStyles

[replatestheme]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

makeStyles have access to custom variables created in theme
https://material-ui.com/customization/themes/#custom-variables

Current Behavior 😯

makeStyles cannot access custom variables created in theme

const useStyles = makeStyles(theme => {
  console.log(theme); // no theme custom variables
  return {
    root: {
      width: '100%',
    },
  };
});

Steps to Reproduce 🕹

Link:

https://codesandbox.io/s/ovjn13pvk9

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.6.0 |
| Material-UI/styles | v3.0.0-alpha.1 |
| React | 16.7.0-alpha.2 |

[eps1lon]

makeStyles is theme agnostic. You actually have to provide a theme via @material-ui/styles/ThemeProvider: https://codesandbox.io/s/zr1mjxxpq4

[replatestheme]

Got it, totally missed the ThemeProvider and also the useStyles placement. Thanks a lot eps1lon.

[eps1lon]

I got confused there too when classes was empty until I realized where useStyles was placed. New API both in react and @material-ui/styles will take some time getting used to.

[krazyjakee]

Just to confirm. I now have to wrap hundreds of components in (yet another) provider just to access the theme?

Is there an easier way?

[eps1lon]

Just to confirm. I now have to wrap hundreds of components in (yet another) provider just to access the theme?

Is there an easier way?

I'm not familiar with other theming solutions that don't use context. If you're concerned about perf then rest assured: The context API is tailored to many consumers where the provider rarely updates:

My personal summary is that new context is ready to be used for low frequency unlikely updates (like locale/theme). It's also good to use it in the same way as old context was used. I.e. for static values and then propagate updates through subscriptions. [...]
--- https://github.com/facebook/react/issues/14110#issuecomment-448074060

[valoricDe]

Usually you put the ThemeProvider directly underneath your root div element of the app

[PabloDinella]

Can't find this 'function as a parameter of makeStyles syntax' in docs, I only see examples passing an object to makeStyles. Shouldn't it be noted that makeStyles also accepts a function that will receive the theme, or is it noted somewhere else?

[jpsalvadorm63]

Maybe its better to separate theme (stuff like palette) from style (stuff like margin and padding etc.