Material-ui: codesandbox examples with react hooks are broken

[asokani]

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

all codesandbox examples are working

Current Behavior 😯

some codesandbox examples are broken

Steps to Reproduce 🕹

Click through codesandbox examples, for example https://codesandbox.io/s/pkry7zyj8m

Steps to fix

You need to change in package.json

    "react-dom": "latest",
    "react": "latest",

to

    "react-dom": "next",
    "react": "next",

and add the ThemeProvider to index.js like this:

import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";

const theme = createMuiTheme();

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Demo />
  </ThemeProvider>,
  document.querySelector("#root")
);

See the fixed demo: https://codesandbox.io/s/7w5zzqkjwq

[joshwooding]

Thanks for reporting this, it was noticed a few days ago but it hasn’t been decided how the theme issue will be fixed. @oliviertassinari

[oliviertassinari]

@asokani Do you want to give it a shot? The fix can look something like this:
```diff
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -38,7 +38,7 @@ function addHiddenInput(form, name, value) {
}

function getDemo(props, raw) {
- return {
+ const demo = {
title: 'Material demo',
description: props.githubLocation,
dependencies: getDependencies(raw, props.demoOptions.react),
@@ -60,6 +60,29 @@ ReactDOM.render(, document.querySelector('#root'));
, }, }; + + if (props.codeVariant === CODE_VARIANTS.HOOK) { + demo.dependencies.react = 'next'; + demo.dependencies['react-dom'] = 'next'; + demo.files['index.js'] =
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Demo from './demo';
+import { createMuiTheme } from "@material-ui/core/styles";
+import { ThemeProvider } from "@material-ui/styles";
+
+const theme = createMuiTheme();
+
+ReactDOM.render(
+ +
+ ,
+ document.querySelector("#root")
+);
+`;
+ }
+
+ return demo;
}

const styles = theme => ({
```

[asokani]

If no one picks it sooner, I can try out at the weekend.

[nemethmik]

Excellent source of information to learn. I love React Hooks. I have forked two of your samples, TextFields, Filled Text Fields and modified them to compile and work. So, behind the scene makeStyles creates a React Context for the styles. A perfect example for when to use context.
BTW, Material-UI is lightyears ahead of MDC Web/MDC React. I've recently reviewed the codelabs MDC101, MDC102, MDC103 and I can say, MDC Web cannot come even close to MUI. That SCSS-based styling looked so anachronistic and absolutely not OK for today's requirement for highly dynamic and flexible mobile business application development. MUI/React Hooks/TypeScript is the most powerful development toolset for robust mobile business apps.

[oliviertassinari]

@nemethmik Thank you for the positive feedback man, it's fuel for the team!