[Select] Add customization demo

docs/src/pages/demos/selects/CustomizedSelects.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import InputBase from '@material-ui/core/InputBase';
+
+const BootstrapInput = withStyles(theme => ({
+  root: {
+    'label + &': {
+      marginTop: theme.spacing.unit * 3,
+    },
+  },
+  input: {
+    borderRadius: 4,
+    position: 'relative',
+    backgroundColor: theme.palette.common.white,
+    border: '1px solid #ced4da',
+    fontSize: 16,
+    width: 'auto',
+    padding: '10px 26px 10px 12px',
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    // Use the system font instead of the default Roboto font.
+    fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+    '&:focus': {
+      borderRadius: 4,
+      borderColor: '#80bdff',
+      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+    },
+  },
+}))(InputBase);
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  margin: {
+    margin: theme.spacing.unit,
+  },
+  bootstrapFormLabel: {
+    fontSize: 18,
+  },
+});
+
+class CustomizedSelects extends React.Component {
+  state = {
+    age: '',
+  };
+
+  handleChange = event => {
+    this.setState({ age: event.target.value });
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <form className={classes.root} autoComplete="off">
+        <FormControl className={classes.margin}>
+          <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
+            Age
+          </InputLabel>
+          <BootstrapInput />
+        </FormControl>
+        <FormControl className={classes.margin}>
+          <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
+            Age
+          </InputLabel>
+          <Select
+            value={this.state.age}
+            onChange={this.handleChange}
+            input={<BootstrapInput name="age" id="age-customized-select" />}
+          >
+            <MenuItem value="">
+              <em>None</em>
+            </MenuItem>
+            <MenuItem value={10}>Ten</MenuItem>
+            <MenuItem value={20}>Twenty</MenuItem>
+            <MenuItem value={30}>Thirty</MenuItem>
+          </Select>
+        </FormControl>
+        <FormControl className={classes.margin}>
+          <InputLabel htmlFor="age-customized-native-simple" className={classes.bootstrapFormLabel}>
+            Age
+          </InputLabel>
+          <NativeSelect
+            value={this.state.age}
+            onChange={this.handleChange}
+            input={<BootstrapInput name="age" id="age-customized-native-simple" />}
+          >
+            <option value="" />
+            <option value={10}>Ten</option>
+            <option value={20}>Twenty</option>
+            <option value={30}>Thirty</option>
+          </NativeSelect>
+        </FormControl>
+      </form>
+    );
+  }
+}
+
+CustomizedSelects.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomizedSelects);

docs/src/pages/demos/selects/selects.md

@@ -20,6 +20,15 @@ we allow such pattern.
 
 {{"demo": "pages/demos/selects/NativeSelects.js"}}
 
+## Customized selects
+
+If you have been reading the [overrides documentation page](/customization/overrides/)
+but you are not confident jumping in, here's an example of how you can change the main color of an Input.
+
+⚠️ While the material design specification encourages theming, these examples are off the beaten path.
+
+{{"demo": "pages/demos/selects/CustomizedSelects.js"}}
+
 ## Multiple Select
 
 The `Select` component can handle multiple selections.

docs/src/pages/demos/text-fields/CustomizedInputs.js

@@ -10,7 +10,7 @@ import purple from '@material-ui/core/colors/purple';
 import green from '@material-ui/core/colors/green';
 
 const styles = theme => ({
-  container: {
+  root: {
     display: 'flex',
     flexWrap: 'wrap',
   },
@@ -41,9 +41,11 @@ const styles = theme => ({
   },
   bootstrapInput: {
     borderRadius: 4,
+    position: 'relative',
     backgroundColor: theme.palette.common.white,
     border: '1px solid #ced4da',
     fontSize: 16,
+    width: 'auto',
     padding: '10px 12px',
     transition: theme.transitions.create(['border-color', 'box-shadow']),
     // Use the system font instead of the default Roboto font.
@@ -60,6 +62,7 @@ const styles = theme => ({
       '"Segoe UI Symbol"',
     ].join(','),
     '&:focus': {
+      borderRadius: 4,
       borderColor: '#80bdff',
       boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
     },
@@ -80,7 +83,7 @@ function CustomizedInputs(props) {
   const { classes } = props;
 
   return (
-    <div className={classes.container}>
+    <div className={classes.root}>
       <FormControl className={classes.margin}>
         <InputLabel
           htmlFor="custom-css-standard-input"