reactjsmaterial-uijss

How to change the border color of Material UI TextField


I can't seem to figure out how to change the outline color of an outlined variant TextField

I looked around GitHub issues and people seem to be pointing towards using the TextField "InputProps" Property but this seems to do nothing.

This is the field

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);

Solution

  • You can override all the class names injected by Material-UI thanks to the classes property. Have a look at overriding with classes section and the implementation of the component for more detail.

    and finally :

    The API documentation of the Input React component. Learn more about the properties and the CSS customization points.