+ {demo.rawHooks && (
+
+
+
+
+ )}
+ {demo.rawHooks && (
+
+
+
+
+ )}
+
+
+
+
)}
-
-
-
-
@@ -309,11 +385,16 @@ class Demo extends React.Component {
Demo.propTypes = {
classes: PropTypes.object.isRequired,
+ demo: PropTypes.object.isRequired,
demoOptions: PropTypes.object.isRequired,
+ dispatch: PropTypes.func.isRequired,
githubLocation: PropTypes.string.isRequired,
- index: PropTypes.number.isRequired,
- js: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
- raw: PropTypes.string.isRequired,
+ options: PropTypes.object.isRequired,
};
-export default withStyles(styles)(Demo);
+export default compose(
+ connect(state => ({
+ options: state.options,
+ })),
+ withStyles(styles),
+)(Demo);
diff --git a/docs/src/modules/components/DemoFrame.js b/docs/src/modules/components/DemoFrame.js
index 79e638cb28899b..7226351c8c2f30 100644
--- a/docs/src/modules/components/DemoFrame.js
+++ b/docs/src/modules/components/DemoFrame.js
@@ -1,13 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { create } from 'jss';
-import {
- withStyles,
- createGenerateClassName,
- jssPreset,
- MuiThemeProvider,
-} from '@material-ui/core/styles';
+import { withStyles, jssPreset } from '@material-ui/core/styles';
import { StylesProvider } from '@material-ui/styles';
+import NoSsr from '@material-ui/core/NoSsr';
import rtl from 'jss-rtl';
import Frame from 'react-frame-component';
@@ -21,8 +17,6 @@ const styles = theme => ({
},
});
-const generateClassName = createGenerateClassName();
-
class DemoFrame extends React.Component {
state = {
ready: false,
@@ -49,28 +43,27 @@ class DemoFrame extends React.Component {
};
render() {
- const { children, classes, theme } = this.props;
-
- const inIframe = this.state.ready ? (
-
- 
- +
### There is more! diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js index 16e7f27a62055f..fe2a1044332066 100644 --- a/docs/src/modules/components/HomeSteps.js +++ b/docs/src/modules/components/HomeSteps.js @@ -7,7 +7,7 @@ import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import Divider from '@material-ui/core/Divider'; import FileDownloadIcon from '@material-ui/docs/svgIcons/FileDownload'; -import BuildIcon from '@material-ui/icons/Build'; // eslint-disable-line import/no-unresolved +import BuildIcon from '@material-ui/icons/Build'; import WhatshotIcon from '@material-ui/icons/Whatshot'; import MarkdownElement from '@material-ui/docs/MarkdownElement'; import NoSsr from '@material-ui/core/NoSsr'; diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 89e0af6b1fb9af..93c4b38e1a37df 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -58,7 +58,7 @@ function MarkdownDocs(props) { sourceCodeRootUrl={SOURCE_CODE_ROOT_URL} />
+ 
+ As components can be used in different contexts, Material-UI supports different types of customization requirements going from the most specific to the most generic.
-1. [Specific variation for a one-time situation](#1--specific-variation-for-a-one-time-situation) -1. [Dynamic variation for a one-time situation](#2--dynamic-variation-for-a-one-time-situation) -1. [Specific variation of a component](#3--specific-variation-of-a-component) re-used in different contexts -1. [Material Design variations](#4--material-design-variations) such as with the button component -1. [Global theme variation](#5--global-theme-variation) +1. [Specific variation for a one-time situation](#1-specific-variation-for-a-one-time-situation) +1. [Dynamic variation for a one-time situation](#2-dynamic-variation-for-a-one-time-situation) +1. [Specific variation of a component](#3-specific-variation-of-a-component) re-used in different contexts +1. [Material Design variations](#4-material-design-variations) such as with the button component +1. [Global theme variation](#5-global-theme-variation) ## 1. Specific variation for a one-time situation @@ -31,7 +31,7 @@ of the `