In Material UI, how can I change the border color of the TextField only after the user enters text?

Question

Given a TextField, is there a way I can detect that it has text input, and then style the border only on that condition?

I'm using the outlined TextField. It has placeholder text when empty.

<TextField variant="outlined" />

Currently I've only succeeded in changing the text input color when it's filled by detecting if there's placeholder text currently visible.

In my overrides:

MuiOutlinedInput: {
  root: {
    '& $notchedOutline': {
      borderColor: 'green', // default colour, want to change this when field has input
    },
  },
  input: {
    '&:not(:placeholder-shown)': {
      color: 'red', // input field text becomes red when input is provided
    },
  },
},

Code Sandbox

I want the border to also become red here when the user enters text. I can't get the placeholder trick to work on changing the border color because the border by default is on the <fieldset> not the <input>. Does anyone have any ideas?

You should create a minimal reproducible example (preferably on [codesandbox](https://codesandbox.io/)) — hgb123, Sep 01 '20 at 18:43

score 1 · Accepted Answer · answered Sep 01 '20 at 19:41

Because CSS has no pseudo selector to detect whether input is empty or not (this question), so you must programmatically detect input and override the TextField border color

<TextField
  id="fullName"
  placeholder="Full name"
  variant="outlined"
  value={this.state.inputValue}
  onChange={(e) => this.setState({ inputValue: e.target.value })}
  InputProps={{
    classes: {
      notchedOutline: this.state.inputValue && classes.greenBorder
    }
  }}
/>

Codesandbox for demo

In Material UI, how can I change the border color of the TextField only after the user enters text?

1 Answers1