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

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

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

const styles = theme => ({  notchedOutline: {    borderWidth: "1px",    borderColor: "yellow !important"  }}); <TextField              variant="outlined"              rows="10"              fullWidth              InputProps={{                classes: {                  notchedOutline: classes.notchedOutline                }              }}              id="standard-textarea"              label="Input Set"              helperText="Enter an array with elemets seperated by , or enter a JSON object"              placeholder="Placeholder"              multiline              value={"" + this.props.input}              onChange={this.props.handleChangeValue("input")}              className={classes.textField}              margin="normal"            />