How to change the border color of Material-UI <TextField/>

Question

I can't seem to figure out how to change the outline color of an outlined variant I looked around GitHub issues and people seem to be pointing towards using the "InputProps" Property but this seems to do nothing. Here is my code in its current state

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

const styles = theme => ({
field: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    height: '30px !important'
},
});

class _Field extends React.Component {
      render() {
          const { classes, fieldProps } = this.props;
             return (
                <TextField
                {...fieldProps}
                label={this.props.label || "<Un-labeled>"}
                InputLabelProps={{ shrink: true }} // stop from animating.
                inputProps={{ className: classes.fieldInput }}
                className={classes.field}
                margin="dense"
               variant="outlined"
            />
        );
    }
}

_Field.propTypes = {
    label: PropTypes.string,
    fieldProps: PropTypes.object,
    classes: PropTypes.object.isRequired
}

export default withStyles(styles)(_Field);

Answer 1

Take a look at this, I made a quick demo:

https://stackblitz.com/edit/material-ui-custom-outline-color

It changes the default border color and the label color of the Material-UI TextField but keeps the primary color when focused.

Also, take a look at this link, it gave me the "idea":

https://github.com/mui-org/material-ui/issues/13347

If you want to change the color when focused look at these examples from the documentation:

https://material-ui.com/demos/text-fields/#customized-inputs