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