How to style the border of a MUI outlined TextField?

Question

Here is my current set up for a TextField component:

const styles = {
    resize: {
        fontSize: '50px',
    }
}

const textField = (props) => {

    const { classes } = props;

    return (
        <TextField
            value={props.value}
            placeholder={'$'}
            variant={'outlined'}
            onChange={props.onChange}
            autoFocus
            InputProps={{
                classes: {
                    input: classes.resize
                }
            }}
        />
    );
};

export default withStyles(styles)(textField);

When clicking in the text field the border fades away (to a white color). I want the border to stay no matter what and not fade. I tried looking through the material-ui examples for an outlined textfield and came across the "Bare" one which had a fixed border but cannot get it to work in my case. I think I have to dig down through the wrapper components and set the style for the border somewhere? Im not sure.

Answer 1

Taking from my indepth answer https://github.com/mui-org/material-ui/pull/13105#issuecomment-427459843 you could add styles to the notchedOutline class.

<TextField classes={{ notchedOutline: myClassnameWithCustomStyles }} />

Demo: https://codesandbox.io/s/ppmxn3rp9x

This currently has some limitation which I laid out in the linked comment.

Answer 2

This is what worked for me.

In your style file have this

underline: {
  "&:after": {
    borderBottomColor: "rgb(70, 197, 29)",
    borderWidth: "1px"
  }
}

And then in my TextField I will implement the abobe within the InputProp property

          <TextField
              id="standard-number"
              label="Number"
              required
              autoFocus
              classes={{
                root: classes.space,
              }}
              value={some_value}
              onChange={e =>
                this.setState({
                  some_value: e.target.value
                })
              }
              error={some_value === "" || some_value < 0}
              helperText={
                qty_in_mts === ""
                  ? "Please enter Quantity (in M. Tons)"
                  : " "
              }
              label="Quantity (M. Tons)"
              type="number"
              fullWidth
              InputProps={{
                classes: {
                  underline: classes.underline
                }
              }}
            />