[TextField] Improve outlined variant customization

The documentation doesn’t mention the class name to customize the outline when using a Textfield with the outlined variant.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

In the Input api page, the CSS Api should list the notchedOutline class property name.

Current Behavior

Currently there is nothing in the documentation that allow us to know how to customize the outline.

Context

Changing the color of the border.

Your Environment

Tech	Version
Material-UI	v3.3.0

[oliviertassinari]

The customization story was overlooked when implementing this outlined variant. Right now, you can change the color like this:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = theme => ({
  notchedOutline: {},
  focused: {
    "& $notchedOutline": {
      borderColor: "yellow"
    }
  }
});

class OutlinedTextFields extends React.Component {
  state = {
    name: "Cat in the Hat"
  };

  handleChange = name => event => {
    this.setState({
      [name]: event.target.value
    });
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-name"
          label="Name"
          InputProps={{
            classes: {
              notchedOutline: classes.notchedOutline,
              focused: classes.focused
            }
          }}
          value={this.state.name}
          onChange={this.handleChange("name")}
          variant="outlined"
        />
      </form>
    );
  }
}

OutlinedTextFields.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(OutlinedTextFields);

https://codesandbox.io/s/7jpl38xm1x

Going forward, I think that we should extract the state logic style out from the private NotchedOutline.js component and move it to the OutlinedInput.js component.

[oliviertassinari]

@serendipity1004: Let us know what you think:

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import purple from "@material-ui/core/colors/purple";

const styles = theme => ({
  root: {
    "&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
      borderColor: purple[500]
    }
  },
  disabled: {},
  focused: {},
  error: {},
  notchedOutline: {}
});

function CustomizedInputs(props) {
  return (
    <TextField
      InputProps={{ classes: props.classes }}
      label="Custom CSS"
      variant="outlined"
      id="custom-css-outlined-input"
    />
  );
}

export default withStyles(styles)(CustomizedInputs);

https://codesandbox.io/s/ry26oj1rkq