Material-ui: after @material-ui/styles install(), theme is empty object in Slider Component

[xiaoyu-tamu]

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

It should render component without error.

Current Behavior 😯

Warning: Failed prop type: The prop `theme` is marked as required in `Slide`, but its value is `null`.
    in Slide (created by Context.Consumer)
    in WithTheme(Slide) (created by Snackbar)
    in div (created by Snackbar)
    in ClickAwayListener (created by Snackbar)
    in Snackbar (created by WithStylesInner)
    in WithStylesInner (created by Context.Consumer)
    in WithStyles(Snackbar) (created by App)
    in div (created by App)
    in App
Uncaught TypeError: Cannot read property 'transitions' of null

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/7yrpv1vr3x

// bootstrap.js
import { install } from "@material-ui/styles";
install();

// index.js

import "./bootstrap";
import React from "react";
import ReactDOM from "react-dom";
import { Snackbar } from "@material-ui/core";
import "./styles.css";

function App() {
  return (
    <div>
      <Snackbar open />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.0 |
| Material-UI/styles | v3.0.0-alpha.8 |
| React | 16.8.0-alpha.1 |
| React-DOM | 16.8.0-alpha.1 |
| TypeScript | |
| etc. | |

[oliviertassinari]

@xiaoyu-tamu @material-ui/styles is a raw styling solution. It doesn't know anything about Material-UI. You need to use the ThemeProvider to inject a theme. It doesn't have a default one. This problem will be resolved in v4 as we will replace the existing styling solution with this new package.

[xiaoyu-tamu]

@oliviertassinari Thanks a lot.

for googler

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

const theme = createMuiTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Snackbar open />
    </ThemeProvider>
  );
}

[jeff-ofobrukweta]

Thanks you guy @oliviertassinari Thanks a lot.