title: React material-UI override default form input style
body: <p>I would like to override default form input style, so I've <a href="https://material-ui-next.com/demos/text-fields/#customized-inputs" rel="nofollow noreferrer">found</a> this code below. The problem is that I would like to add <code>error behaviour</code> of the form input, but I don't know how. Could anyone help me to add red border to the input when it's in error state? Thank you very much! </p>
  
  <pre><code>import React from 'react';
  import { withStyles } from 'material-ui/styles';
  import TextField from 'material-ui/TextField';
  
  const styles = theme =&gt; ({
    textFieldRoot: {
      padding: 0,
      'label + &amp;': {
        marginTop: theme.spacing.unit * 3,
      },
    },
    textFieldInput: {
      borderRadius: 4,
      backgroundColor: 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']),
      '&amp;:focus': {
        borderColor: '#80bdff',
        boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
      },
    },
    textFieldFormLabel: {
      fontSize: 18,
    },
  });
  
  function CustomizedInputs(props) {
    const { classes } = props;
  
    return (
      &lt;div className={classes.container}&gt;
        &lt;TextField
          defaultValue="react-bootstrap"
          label="Bootstrap"
          id="bootstrap-input"
          InputProps={{
            disableUnderline: true,
            classes: {
              root: classes.textFieldRoot,
              input: classes.textFieldInput,
            },
          }}
          InputLabelProps={{
            shrink: true,
            className: classes.textFieldFormLabel,
          }}
        /&gt;
      &lt;/div&gt;
    );
  }
  
  export default withStyles(styles)(CustomizedInputs);
  </code></pre>