How to change the border color of MUI TextField

Question

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

Answer 1

https://codesandbox.io/s/6rx8p

                      <CssTextField                               label="Username"                         className="username"                        name="username"                        onChange={this.onChange}                        type="text"                        autoComplete="current-password"                        margin="normal"                        inputProps={{ style: { fontFamily: 'nunito', color: 'white'}}}                      /> 

//declare the const and add the material UI style

const CssTextField = withStyles({   root: {     '& label.Mui-focused': {       color: 'white',     },     '& .MuiInput-underline:after': {       borderBottomColor: 'yellow',     },     '& .MuiOutlinedInput-root': {       '& fieldset': {         borderColor: 'white',       },       '&:hover fieldset': {         borderColor: 'white',       },       '&.Mui-focused fieldset': {         borderColor: 'yellow',       },     },   }, })(TextField); 

Answer 2

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://mui.com/components/text-fields/#customization