[docs] Show how to change the color of the TextField (mui#8880)

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

@@ -0,0 +1,95 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Input, { InputLabel } from 'material-ui/Input';
+import TextField from 'material-ui/TextField';
+import { FormControl } from 'material-ui/Form';
+import purple from 'material-ui/colors/purple';
+
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  formControl: {
+    margin: theme.spacing.unit,
+  },
+  inputLabelFocused: {
+    color: purple[500],
+  },
+  inputInkbar: {
+    '&:after': {
+      backgroundColor: purple[500],
+    },
+  },
+  textFieldRoot: {
+    padding: 0,
+    'label + &': {
+      marginTop: theme.spacing.unit * 3,
+    },
+  },
+  textFieldInput: {
+    borderRadius: 4,
+    background: theme.palette.common.white,
+    border: '1px solid #ced4da',
+    fontSize: 16,
+    padding: '10px 12px',
+    width: 'calc(100% - 24px)',
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    '&:focus': {
+      borderColor: '#80bdff',
+      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+    },
+  },
+  textFieldFormLabel: {
+    fontSize: 18,
+  },
+});
+
+function CustomizedInputs(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.container}>
+      <FormControl className={classes.formControl}>
+        <InputLabel
+          FormControlClasses={{
+            focused: classes.inputLabelFocused,
+          }}
+          htmlFor="custom-color-input"
+        >
+          Name
+        </InputLabel>
+        <Input
+          classes={{
+            inkbar: classes.inputInkbar,
+          }}
+          id="custom-color-input"
+        />
+      </FormControl>
+      <TextField
+        defaultValue="react-bootstrap"
+        label="Bootstrap"
+        InputProps={{
+          disableUnderline: true,
+          classes: {
+            root: classes.textFieldRoot,
+            input: classes.textFieldInput,
+          },
+        }}
+        InputLabelProps={{
+          shrink: true,
+          className: classes.textFieldFormLabel,
+        }}
+      />
+    </div>
+  );
+}
+
+CustomizedInputs.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomizedInputs);

docs/src/pages/demos/text-fields/text-fields.md

@@ -48,3 +48,12 @@ We demonstrate how you could be using third-party libraries to [format your inpu
 Here, we are using [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries.
 
 {{demo='pages/demos/text-fields/FormattedInputs.js'}}
+
+## Customized inputs
+
+You have been reading our [overrides documentation page](/customization/overrides)
+but you are not confident jumping in?
+Here is an example of how you can change the main color of an input from "primary" to purple.
+There is no limit.
+
+{{demo='pages/demos/text-fields/CustomizedInputs.js'}}

pages/api/select.md

@@ -21,7 +21,7 @@ filename: /src/Select/Select.js
 | multiple | boolean | false | If true, `value` must be an array and the menu will support multiple selections. You can only use it when the `native` property is `false` (default). |
 | native | boolean | false | If `true`, the component will be using a native `select` element. |
 | renderValue | Function |  | Render the selected value. You can only use it when the `native` property is `false` (default). |
-| value | union:&nbsp;Array<string<br>&nbsp;number><br>&nbsp;string<br>&nbsp;number<br> |  | The input value, required for a controlled component. |
+| value | union:&nbsp;$ReadOnlyArray<string<br>&nbsp;number><br>&nbsp;string<br>&nbsp;number<br> |  | The input value, required for a controlled component. |
 
 Any other properties supplied will be [spread to the root element](/customization/api#spread).
 

pages/demos/text-fields.js

@@ -50,6 +50,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/text-fields/FormattedInputs'), 'utf8')
+`,
+        },
+        'pages/demos/text-fields/CustomizedInputs.js': {
+          js: require('docs/src/pages/demos/text-fields/CustomizedInputs').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/text-fields/CustomizedInputs'), 'utf8')
 `,
         },
       }}